@sekiui/elements 0.1.3 → 0.1.4

package/dist/collection/components/collapsible/seki-collapsible.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * @slot - The collapsible content (trigger and content)
  *
@@ -27,9 +28,19 @@ export class SekiCollapsible {
     componentWillLoad() {
         // Initialize with defaultOpen or open prop
         this._isOpen = this.open || this.defaultOpen;
+        // Publish before the first render so `<seki-collapsible open>` reaches the
+        // trigger and content at first paint (#323).
+        this.updateContext();
     }
     openChanged(newValue) {
+        if (newValue === this._isOpen)
+            return;
         this._isOpen = newValue;
+        this.updateContext();
+        this.sekiOpenChange.emit(newValue);
+    }
+    disabledChanged() {
+        this.updateContext();
     }
     /**
      * Toggle the collapsible open state
@@ -70,15 +81,8 @@ export class SekiCollapsible {
     get triggerId() {
         return `seki-collapsible-trigger-${this.instanceId}`;
     }
-    componentDidLoad() {
-        this.updateContext();
-    }
-    componentDidUpdate() {
-        this.updateContext();
-    }
     updateContext() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._collapsibleContext = this.getContext();
+        publishContext(this.el, '_collapsibleContext', this.getContext(), this.collapsibleContextChange);
     }
     getContext() {
         return {
@@ -90,7 +94,7 @@ export class SekiCollapsible {
         };
     }
     render() {
-        return (h(Host, { key: '9434ff084e0c2c680323036a2fd5e0718c7a5ec4', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'f83248fb6c62c5b9008389d35686b5ebd1858916', part: "collapsible", class: "collapsible" }, h("slot", { key: '804b2e5188aeaef8d57bc88c418ee745bdf296cd' }))));
+        return (h(Host, { key: '3b675841816d04cb9295ead7b0909d311904fa6a', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '155a3ab25691993804c0acf8510dd8bccf39b1fe', part: "collapsible", class: "collapsible" }, h("slot", { key: '1f9979e76571f519d9d3601ba2fb86c35704ce9a' }))));
     }
     static get is() { return "seki-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -189,6 +193,21 @@ export class SekiCollapsible {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "collapsibleContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies collapsible parts that `_collapsibleContext` changed.\nNot part of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -251,6 +270,9 @@ export class SekiCollapsible {
         return [{
                 "propName": "open",
                 "methodName": "openChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }];
     }
 }

package/dist/collection/components/combobox-content/seki-combobox-content.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Combobox items
  */
@@ -8,32 +9,24 @@ export class SekiComboboxContent {
         this.maxHeight = '15rem';
         this.isOpen = false;
         this.listboxId = '';
+        // Follow the published context, not the host's aria-expanded attribute: the
+        // old MutationObserver only worked because seki-combobox happens to reflect
+        // its open state there, and it was never disconnected (#323).
+        this.comboboxConsumer = new ContextConsumer('seki-combobox', 'comboboxContext', ctx => {
+            if (ctx) {
+                this.isOpen = ctx.open;
+                this.listboxId = ctx.listboxId;
+            }
+        });
     }
-    getContext() {
-        const combobox = this.el.closest('seki-combobox');
-        return (combobox === null || combobox === void 0 ? void 0 : combobox.comboboxContext) || null;
-    }
-    componentDidLoad() {
-        this.updateState();
-        // Set up mutation observer to watch for context changes
-        this.observeParent();
-    }
-    observeParent() {
-        const combobox = this.el.closest('seki-combobox');
-        if (combobox) {
-            const observer = new MutationObserver(() => this.updateState());
-            observer.observe(combobox, { attributes: true, subtree: false });
-        }
+    connectedCallback() {
+        this.comboboxConsumer.connect(this.el);
     }
-    updateState() {
-        const ctx = this.getContext();
-        if (ctx) {
-            this.isOpen = ctx.open;
-            this.listboxId = ctx.listboxId;
-        }
+    disconnectedCallback() {
+        this.comboboxConsumer.disconnect();
     }
     render() {
-        return (h(Host, { key: '9ca02f1ae2ea34a674798ba7ef378a4bfff89f15', class: { 'hidden': !this.isOpen } }, h("div", { key: 'e6c7d6b245e31be15e474458a9037fd237d1d389', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: '1fe0843f17b6a75214ff6ca16e5ca79929192025' }))));
+        return (h(Host, { key: '08fdcae6d7a7094a52741c0482f5b96ddbda3426', class: { 'hidden': !this.isOpen } }, h("div", { key: 'ad07c879b50568cfeb24b9bc1fb012ceb6503eaa', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: 'c3c569b4520d814ea75dd3f1fe3702b759a1958e' }))));
     }
     static get is() { return "seki-combobox-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-empty.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command empty state - shown when no results match
  *
@@ -9,33 +10,16 @@ import { h, Host } from "@stencil/core";
 export class SekiCommandEmpty {
     constructor() {
         this._visible = false;
-        this.handleValueChange = () => {
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', context => {
             var _a;
-            const context = this.getContext();
             this._visible = (_a = context === null || context === void 0 ? void 0 : context.isEmpty) !== null && _a !== void 0 ? _a : false;
-        };
-    }
-    getContext() {
-        const command = this.el.closest('seki-command');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return command ? command._commandContext : null;
+        });
     }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._visible = (_a = context === null || context === void 0 ? void 0 : context.isEmpty) !== null && _a !== void 0 ? _a : false;
-    }
-    componentDidLoad() {
-        const command = this.el.closest('seki-command');
-        if (command) {
-            command.addEventListener('sekiValueChange', this.handleValueChange);
-        }
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        const command = this.el.closest('seki-command');
-        if (command) {
-            command.removeEventListener('sekiValueChange', this.handleValueChange);
-        }
+        this.commandConsumer.disconnect();
     }
     render() {
         if (!this._visible) {

package/dist/collection/components/command/seki-command-group.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command group - groups related items with a heading
  *
@@ -9,10 +10,9 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandGroup {
     constructor() {
-        this.onCommandValueChange = () => {
-            // Small delay to allow items to update first
-            requestAnimationFrame(() => this.updateVisibility());
-        };
+        // Recomputed from the parent's context on every publish, including a
+        // `value` set from outside (which never fired sekiValueChange) (#323).
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', () => this.updateVisibility());
         /**
          * Show even when all items are filtered out
          */
@@ -33,18 +33,16 @@ export class SekiCommandGroup {
      * Update visibility based on child items
      */
     updateVisibility() {
-        const items = this.getItems();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this._hasVisibleItems = items.some((item) => { var _a, _b; return (_b = (_a = item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item)) !== null && _b !== void 0 ? _b : true; });
+        const context = this.commandConsumer.context;
+        if (!context)
+            return;
+        this._hasVisibleItems = this.getItems().some(item => context.isItemMatch(item));
     }
-    componentDidLoad() {
-        var _a, _b;
-        this.commandEl = (_a = this.el.closest('seki-command')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.commandEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onCommandValueChange);
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.commandEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onCommandValueChange);
+        this.commandConsumer.disconnect();
     }
     render() {
         const shouldShow = this.forceMount || this._hasVisibleItems;

package/dist/collection/components/command/seki-command-input.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command input - search field for filtering items
  *
@@ -12,6 +13,20 @@ export class SekiCommandInput {
          * Placeholder text
          */
         this.placeholder = 'Type a command or search...';
+        /** The parent command's search value, mirrored from its context. */
+        this._value = '';
+        // Follow the parent's value so `<seki-command value="...">` and
+        // `command.value = ...` show up in the field, not just typed input (#323).
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', context => {
+            var _a;
+            const value = (_a = context === null || context === void 0 ? void 0 : context.value) !== null && _a !== void 0 ? _a : '';
+            this._value = value;
+            // Keep the live field in step even when the re-render is skipped because
+            // _value did not change (e.g. the user typed it).
+            if (this.inputRef && this.inputRef.value !== value) {
+                this.inputRef.value = value;
+            }
+        });
         this.handleInput = (event) => {
             const target = event.target;
             this.sekiCommandInputChange.emit(target.value);
@@ -23,10 +38,11 @@ export class SekiCommandInput {
             }
         };
     }
-    getContext() {
-        const command = this.el.closest('seki-command');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return command ? command._commandContext : null;
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.commandConsumer.disconnect();
     }
     /**
      * Focus the input
@@ -43,10 +59,8 @@ export class SekiCommandInput {
         });
     }
     render() {
-        var _a;
-        const context = this.getContext();
-        const value = (_a = context === null || context === void 0 ? void 0 : context.value) !== null && _a !== void 0 ? _a : '';
-        return (h(Host, { key: '5652d7fbc44c5fc236e73991632631885273144f' }, h("div", { key: 'e1ae542f5aac09fb7d145d2b093c4a7f2905ee3a', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: '63c9c6f7e9285e08b497452caf7e323cac76d7d4', part: "icon", class: "command-input-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: '9d270ed1fe6610db1f2803d5b058fdd846b93cb3', cx: "11", cy: "11", r: "8" }), h("path", { key: '840ca57335907d4a358d97e2da3f3d8393ecaf9e', d: "m21 21-4.3-4.3" })), h("input", { key: 'e79f08cebbd4f59f18a813644b902fa5ac93d966', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
+        const value = this._value;
+        return (h(Host, { key: 'b12d460fd004bb51fffe1736e1cf508a38174bc2' }, h("div", { key: '6f7dfca8a574b79c28b747d8a256507cffbd03ac', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: 'a7a04d003ce6ff04abfe0db3ccddd1d15b1891dc', part: "icon", class: "command-input-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: 'df534fd0e6f6472ab8b3a09adae7cf15d3be6724', cx: "11", cy: "11", r: "8" }), h("path", { key: '60b0ef61ea3dd7f64446a13173ecd171afb02f4c', d: "m21 21-4.3-4.3" })), h("input", { key: '1aa9388b9aae712482eabbc0aa8b6832af954782', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-command-input"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +98,11 @@ export class SekiCommandInput {
             }
         };
     }
+    static get states() {
+        return {
+            "_value": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "sekiCommandInputChange",

package/dist/collection/components/command/seki-command-item.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command item - selectable option in the command list
  *
@@ -21,6 +22,16 @@ export class SekiCommandItem {
          * Whether this item matches the current filter
          */
         this._visible = true;
+        // Visibility and highlight come from the parent's context, so an item added
+        // after mount is filtered against the current search right away and
+        // filtering works in the lazy build, where seki-command cannot call this
+        // class's plain methods through the host element (#323).
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', context => {
+            if (!context)
+                return;
+            this._visible = context.isItemMatch(this.el);
+            this._highlighted = context.highlightedItem === this.el;
+        });
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -38,6 +49,12 @@ export class SekiCommandItem {
         };
         this.instanceId = `seki-command-item-${++SekiCommandItem.instanceCount}`;
     }
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.commandConsumer.disconnect();
+    }
     /**
      * Get the searchable text for this item
      */

package/dist/collection/components/command/seki-command.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Command root component - command palette for navigation
  *
@@ -24,31 +25,61 @@ export class SekiCommand {
          * Currently highlighted item index
          */
         this._highlightedIndex = 0;
+        /**
+         * Whether an item matches the current search. Computed from the item's host
+         * (text + `keywords`) rather than by calling methods on it: the item's plain
+         * class methods do not exist on the host element in the lazy-loaded build,
+         * which is why filtering never happened there before #323.
+         */
+        this.matchesItem = (item) => {
+            var _a, _b, _c, _d;
+            if (!this.filter)
+                return true;
+            const searchValue = this._value.toLowerCase().trim();
+            if (searchValue === '')
+                return true;
+            const keywords = (_b = (_a = item.keywords) !== null && _a !== void 0 ? _a : item.getAttribute('keywords')) !== null && _b !== void 0 ? _b : '';
+            const searchText = `${(_d = (_c = item.textContent) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : ''} ${keywords}`.toLowerCase();
+            return searchText.includes(searchValue);
+        };
     }
     valueChanged(newValue) {
         this._value = newValue;
-        this.applyFilter();
+        // resetHighlight() republishes the context, which refilters every part.
         this.resetHighlight();
     }
+    filterChanged() {
+        this.resetHighlight();
+    }
+    connectedCallback() {
+        // Filtering, the empty state and the highlight all derive from which
+        // items exist, so a later DOM change has to be republished to the parts.
+        if (typeof MutationObserver !== 'undefined') {
+            this.itemObserver = new MutationObserver(() => this.updateContext());
+            this.itemObserver.observe(this.el, { childList: true, subtree: true, characterData: true });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.itemObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.itemObserver = undefined;
+    }
     componentWillLoad() {
         this._value = this.value;
+        // Publish before the first render so parts see `value` declared in HTML
+        // (#323).
+        this.updateContext();
     }
     componentDidLoad() {
-        // Set initial context
-        this.updateContext();
-        // Apply initial filter
-        this.applyFilter();
         // Set initial highlight
         requestAnimationFrame(() => this.resetHighlight());
     }
     handleInputChange(event) {
         event.stopPropagation();
         this._value = event.detail;
+        // @Watch('value') refilters, resets the highlight and republishes.
         this.value = event.detail;
         this.sekiValueChange.emit(event.detail);
-        this.applyFilter();
-        this.resetHighlight();
-        this.updateContext();
     }
     handleItemSelect(event) {
         event.stopPropagation();
@@ -109,37 +140,12 @@ export class SekiCommand {
     getAllItems() {
         return Array.from(this.el.querySelectorAll('seki-command-item'));
     }
-    getVisibleItems() {
-        return this.getAllItems().filter((item) => {
-            var _a, _b, _c, _d;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const isVisible = (_c = (_b = (_a = item).isVisible) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : true;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const isDisabled = (_d = item.disabled) !== null && _d !== void 0 ? _d : false;
-            return isVisible && !isDisabled;
-        });
+    isItemDisabled(item) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return Boolean(item.disabled);
     }
-    applyFilter() {
-        if (!this.filter)
-            return;
-        const searchValue = this._value.toLowerCase().trim();
-        const items = this.getAllItems();
-        items.forEach((item) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const searchText = (_e = (_c = (_b = (_a = item).getSearchText) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : (_d = item.textContent) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== null && _e !== void 0 ? _e : '';
-            const matches = searchValue === '' || searchText.includes(searchValue);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_g = (_f = item).setVisible) === null || _g === void 0 ? void 0 : _g.call(_f, matches);
-        });
-        // Update groups visibility
-        const groups = Array.from(this.el.querySelectorAll('seki-command-group'));
-        groups.forEach((group) => {
-            var _a, _b;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_b = (_a = group).updateVisibility) === null || _b === void 0 ? void 0 : _b.call(_a);
-        });
-        this.updateContext();
+    getVisibleItems() {
+        return this.getAllItems().filter(item => this.matchesItem(item) && !this.isItemDisabled(item));
     }
     resetHighlight() {
         this._highlightedIndex = 0;
@@ -147,20 +153,10 @@ export class SekiCommand {
         this.updateHighlight(items);
     }
     updateHighlight(items) {
-        var _a, _b, _c;
-        // Clear all highlights
-        this.getAllItems().forEach((item) => {
-            var _a, _b;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_b = (_a = item).setHighlighted) === null || _b === void 0 ? void 0 : _b.call(_a, false);
-        });
-        // Set new highlight
+        var _a, _b;
+        // Items render their highlight from context.highlightedItem.
         if (items.length > 0 && this._highlightedIndex >= 0 && this._highlightedIndex < items.length) {
-            const item = items[this._highlightedIndex];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_b = (_a = item).setHighlighted) === null || _b === void 0 ? void 0 : _b.call(_a, true);
-            // Scroll into view
-            (_c = item.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(item, { block: 'nearest' });
+            (_b = (_a = items[this._highlightedIndex]).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest' });
         }
         this.updateContext();
     }
@@ -174,7 +170,10 @@ export class SekiCommand {
             value: this._value,
             highlightedIndex: this._highlightedIndex,
             highlightedId,
-            isEmpty: visibleItems.length === 0,
+            highlightedItem: highlightedItem !== null && highlightedItem !== void 0 ? highlightedItem : null,
+            // Disabled items still render, so they count as results.
+            isEmpty: !this.getAllItems().some(this.matchesItem),
+            isItemMatch: this.matchesItem,
             filter: (text) => {
                 const searchValue = this._value.toLowerCase().trim();
                 return searchValue === '' || text.toLowerCase().includes(searchValue);
@@ -182,11 +181,10 @@ export class SekiCommand {
         };
     }
     updateContext() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._commandContext = this.getContext();
+        publishContext(this.el, '_commandContext', this.getContext(), this.commandContextChange);
     }
     render() {
-        return (h(Host, { key: 'c9623610f679b3bda03500c54cd269a6830afd77' }, h("div", { key: '4ff6ad934f5e28020389521c381f2d7af1b40153', part: "command", class: "command" }, h("slot", { key: '8e318bd7bc0a213eb5b1564d26711e4a63153f5b' }))));
+        return (h(Host, { key: '7f80dd8be39e51feac86933c35ddf845b99b76ef' }, h("div", { key: 'cbc2a0040641591e9036e863ec45d9b11c9c2a42', part: "command", class: "command" }, h("slot", { key: 'abf6c4cdb4ee49b69997de1618c9ce96df753633' }))));
     }
     static get is() { return "seki-command"; }
     static get encapsulation() { return "shadow"; }
@@ -281,6 +279,21 @@ export class SekiCommand {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "commandContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies command parts (input, items, groups, empty state) that\n`_commandContext` changed. Not part of the public API; listen to\n`sekiValueChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -288,6 +301,9 @@ export class SekiCommand {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "filter",
+                "methodName": "filterChanged"
             }];
     }
     static get listeners() {