@vaadin/grid 24.2.0-beta3 → 24.2.0-beta4

package/src/vaadin-grid-filter-element-mixin.d.ts

@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-
-/**
- * Fired when the `value` property changes.
- */
-export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
-
-export interface GridFilterCustomEventMap {
-  'value-changed': GridFilterValueChangedEvent;
-}
-
-export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
-
-export declare function GridFilterElementMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ControllerMixinClass> & Constructor<GridFilterElementMixinClass> & T;
-
-declare class GridFilterElementMixinClass {
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * Current filter value.
-   */
-  value: string | null | undefined;
-}

package/src/vaadin-grid-filter-element-mixin.js

@@ -1,99 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { timeOut } from '@vaadin/component-base/src/async.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
-
-registerStyles(
-  'vaadin-grid-filter',
-  css`
-    :host {
-      display: inline-flex;
-      max-width: 100%;
-    }
-
-    ::slotted(*) {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `,
-  { moduleId: 'vaadin-grid-filter-styles' },
-);
-
-/**
- * @polymerMixin
- *
- * @mixes ControllerMixin
- */
-export const GridFilterElementMixin = (superClass) =>
-  class extends ControllerMixin(superClass) {
-    static get properties() {
-      return {
-        /**
-         * JS Path of the property in the item used for filtering the data.
-         */
-        path: String,
-
-        /**
-         * Current filter value.
-         */
-        value: {
-          type: String,
-          notify: true,
-        },
-
-        /** @private */
-        _textField: {
-          type: Object,
-        },
-      };
-    }
-
-    static get observers() {
-      return ['_filterChanged(path, value, _textField)'];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this._filterController = new SlotController(this, '', 'vaadin-text-field', {
-        initializer: (field) => {
-          field.addEventListener('value-changed', (e) => {
-            this.value = e.detail.value;
-          });
-
-          this._textField = field;
-        },
-      });
-      this.addController(this._filterController);
-    }
-
-    /** @private */
-    _filterChanged(path, value, textField) {
-      if (path === undefined || value === undefined || !textField) {
-        return;
-      }
-      if (this._previousValue === undefined && value === '') {
-        return;
-      }
-
-      textField.value = value;
-      this._previousValue = value;
-
-      this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
-        this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
-      });
-    }
-
-    focus() {
-      if (this._textField) {
-        this._textField.focus();
-      }
-    }
-  };

package/src/vaadin-grid-sorter-mixin.d.ts

@@ -1,44 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-export type GridSorterDirection = 'asc' | 'desc' | null;
-
-/**
- * Fired when the `path` or `direction` property changes.
- */
-export type GridSorterChangedEvent = CustomEvent<{ shiftClick: boolean; fromSorterClick: boolean }>;
-
-/**
- * Fired when the `direction` property changes.
- */
-export type GridSorterDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
-
-export interface GridSorterCustomEventMap {
-  'sorter-changed': GridSorterChangedEvent;
-
-  'direction-changed': GridSorterDirectionChangedEvent;
-}
-
-export interface GridSorterEventMap extends HTMLElementEventMap, GridSorterCustomEventMap {}
-
-export declare function GridSorterMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<GridSorterMixinClass> & T;
-
-declare class GridSorterMixinClass {
-  /**
-   * JS Path of the property in the item used for sorting the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * How to sort the data.
-   * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
-   * descending direction, or `null` for not sorting the data.
-   */
-  direction: GridSorterDirection | null | undefined;
-}

package/src/vaadin-grid-sorter-mixin.js

@@ -1,198 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    @font-face {
-      font-family: 'vaadin-grid-sorter-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAA0AAAAABuwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEFAAAABkAAAAcfep+mUdERUYAAAP4AAAAHAAAAB4AJwAOT1MvMgAAAZgAAAA/AAAAYA8TBPpjbWFwAAAB7AAAAFUAAAFeF1fZ4mdhc3AAAAPwAAAACAAAAAgAAAAQZ2x5ZgAAAlgAAABcAAAAnMvguMloZWFkAAABMAAAAC8AAAA2C5Ap72hoZWEAAAFgAAAAHQAAACQGbQPHaG10eAAAAdgAAAAUAAAAHAoAAABsb2NhAAACRAAAABIAAAASAIwAYG1heHAAAAGAAAAAFgAAACAACwAKbmFtZQAAArQAAAECAAACZxWCgKhwb3N0AAADuAAAADUAAABZCrApUXicY2BkYGAA4rDECVrx/DZfGbhZGEDgyqNPOxH0/wNMq5kPALkcDEwgUQBWRA0dAHicY2BkYGA+8P8AAwMLAwgwrWZgZEAFbABY4QM8AAAAeJxjYGRgYOAAQiYGEICQSAAAAi8AFgAAeJxjYGY6yziBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKoAkwODAwvmRiPvD/AIMDMxCD1CDJKjAwAgBktQsXAHicY2GAAMZQCM0EwqshbAALxAEKeJxjYGBgZoBgGQZGBhCIAPIYwXwWBhsgzcXAwcAEhIwMCi+Z/v/9/x+sSuElA4T9/4k4K1gHFwMMMILMY2QDYmaoABOQYGJABUA7WBiGNwAAJd4NIQAAAAAAAAAACAAIABAAGAAmAEAATgAAeJyNjLENgDAMBP9tIURJwQCMQccSZgk2i5fIYBDAidJjycXr7x5EPwE2wY8si7jmyBNXGo/bNBerxJNrpxhbO3/fEFpx8ZICpV+ghxJ74fAMe+h7Ox14AbrsHB14nK2QQWrDMBRER4mTkhQK3ZRQKOgCNk7oGQqhhEIX2WSlWEI1BAlkJ5CDdNsj5Ey9Rncdi38ES+jzNJo/HwTgATcoDEthhY3wBHc4CE+pfwsX5F/hGe7Vo/AcK/UhvMSz+mGXKhZU6pww8ISz3oWn1BvhgnwTnuEJf8Jz1OpFeIlX9YULDLdFi4ASHolkSR0iuYdjLak1vAequBhj21D61Nqyi6l3qWybGPjySbPHGScGJl6dP58MYcQRI0bts7mjebBqrFENH7t3qWtj0OuqHnXcW7b0HOTZFnKryRGW2hFX1m0O2vEM3opNMfTau+CS6Z3Vx6veNnEXY6jwDxhsc2gAAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSrpYEBlIbxjQDrzgsuAAAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKyoz1cD0o087YTQATOcIewAAAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);
-
-registerStyles(
-  'vaadin-grid-sorter',
-  css`
-    :host {
-      display: inline-flex;
-      cursor: pointer;
-      max-width: 100%;
-    }
-
-    [part='content'] {
-      flex: 1 1 auto;
-    }
-
-    [part='indicators'] {
-      position: relative;
-      align-self: center;
-      flex: none;
-    }
-
-    [part='order'] {
-      display: inline;
-      vertical-align: super;
-    }
-
-    [part='indicators']::before {
-      font-family: 'vaadin-grid-sorter-icons';
-      display: inline-block;
-    }
-
-    :host(:not([direction])) [part='indicators']::before {
-      content: '\\e901';
-    }
-
-    :host([direction='asc']) [part='indicators']::before {
-      content: '\\e900';
-    }
-
-    :host([direction='desc']) [part='indicators']::before {
-      content: '\\e902';
-    }
-  `,
-  { moduleId: 'vaadin-grid-sorter-styles' },
-);
-
-/**
- * A mixin providing common sorter functionality.
- *
- * @polymerMixin
- */
-export const GridSorterMixin = (superClass) =>
-  class GridSorterMixinClass extends superClass {
-    static get properties() {
-      return {
-        /**
-         * JS Path of the property in the item used for sorting the data.
-         */
-        path: String,
-
-        /**
-         * How to sort the data.
-         * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
-         * descending direction, or `null` for not sorting the data.
-         * @type {GridSorterDirection | undefined}
-         */
-        direction: {
-          type: String,
-          reflectToAttribute: true,
-          notify: true,
-          value: null,
-        },
-
-        /**
-         * @type {number | null}
-         * @protected
-         */
-        _order: {
-          type: Number,
-          value: null,
-        },
-
-        /** @private */
-        _isConnected: {
-          type: Boolean,
-          observer: '__isConnectedChanged',
-        },
-      };
-    }
-
-    static get observers() {
-      return ['_pathOrDirectionChanged(path, direction)'];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-      this.addEventListener('click', this._onClick.bind(this));
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-      this._isConnected = true;
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this._isConnected = false;
-
-      if (!this.parentNode && this._grid) {
-        this._grid.__removeSorters([this]);
-      }
-    }
-
-    /** @private */
-    _pathOrDirectionChanged() {
-      this.__dispatchSorterChangedEvenIfPossible();
-    }
-
-    /** @private */
-    __isConnectedChanged(newValue, oldValue) {
-      if (oldValue === false) {
-        return;
-      }
-
-      this.__dispatchSorterChangedEvenIfPossible();
-    }
-
-    /** @private */
-    __dispatchSorterChangedEvenIfPossible() {
-      if (this.path === undefined || this.direction === undefined || !this._isConnected) {
-        return;
-      }
-
-      this.dispatchEvent(
-        new CustomEvent('sorter-changed', {
-          detail: { shiftClick: Boolean(this._shiftClick), fromSorterClick: Boolean(this._fromSorterClick) },
-          bubbles: true,
-          composed: true,
-        }),
-      );
-      // Cleaning up as a programatically sorting can be done after some user interaction
-      this._fromSorterClick = false;
-      this._shiftClick = false;
-    }
-
-    /** @private */
-    _getDisplayOrder(order) {
-      return order === null ? '' : order + 1;
-    }
-
-    /** @private */
-    _onClick(e) {
-      if (e.defaultPrevented) {
-        // Something else has already handled the click event, do nothing.
-        return;
-      }
-
-      const activeElement = this.getRootNode().activeElement;
-      if (this !== activeElement && this.contains(activeElement)) {
-        // Some focusable content inside the sorter was clicked, do nothing.
-        return;
-      }
-
-      e.preventDefault();
-      this._shiftClick = e.shiftKey;
-      this._fromSorterClick = true;
-      if (this.direction === 'asc') {
-        this.direction = 'desc';
-      } else if (this.direction === 'desc') {
-        this.direction = null;
-      } else {
-        this.direction = 'asc';
-      }
-    }
-  };

package/src/vaadin-grid-tree-column-mixin.d.ts

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { GridColumn } from './vaadin-grid-column.js';
-
-export declare function GridTreeColumnMixin<TItem, T extends Constructor<GridColumn>>(
-  superclass: T,
-): Constructor<GridTreeColumnMixinClass<TItem>> & T;
-
-export declare class GridTreeColumnMixinClass<TItem> {
-  /**
-   * JS Path of the property in the item used as text content for the tree toggle.
-   */
-  path: string | null | undefined;
-}

package/src/vaadin-grid-tree-column-mixin.js

@@ -1,92 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { get } from '@vaadin/component-base/src/path-utils.js';
-
-/**
- * @polymerMixin
- */
-export const GridTreeColumnMixin = (superClass) =>
-  class extends superClass {
-    static get properties() {
-      return {
-        /**
-         * JS Path of the property in the item used as text content for the tree toggle.
-         */
-        path: String,
-      };
-    }
-
-    static get observers() {
-      return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path)'];
-    }
-
-    constructor() {
-      super();
-
-      this.__boundOnExpandedChanged = this.__onExpandedChanged.bind(this);
-    }
-
-    /**
-     * Renders the grid tree toggle to the body cell
-     *
-     * @private
-     */
-    __defaultRenderer(root, _column, { item, expanded, level }) {
-      let toggle = root.firstElementChild;
-      if (!toggle) {
-        toggle = document.createElement('vaadin-grid-tree-toggle');
-        toggle.addEventListener('expanded-changed', this.__boundOnExpandedChanged);
-        root.appendChild(toggle);
-      }
-
-      toggle.__item = item;
-      toggle.__rendererExpanded = expanded;
-      toggle.expanded = expanded;
-      toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
-      toggle.textContent = this.__getToggleContent(this.path, item);
-      toggle.level = level;
-    }
-
-    /**
-     * The tree column doesn't allow to use a custom renderer
-     * to override the content of body cells.
-     * It always renders the grid tree toggle to body cells.
-     *
-     * @override
-     */
-    _computeRenderer() {
-      return this.__defaultRenderer;
-    }
-
-    /**
-     * Expands or collapses the row once the tree toggle is switched.
-     * The listener handles only user-fired events.
-     *
-     * @private
-     */
-    __onExpandedChanged(e) {
-      // Skip if the state is changed by the renderer.
-      if (e.detail.value === e.target.__rendererExpanded) {
-        return;
-      }
-
-      if (e.detail.value) {
-        this._grid.expandItem(e.target.__item);
-      } else {
-        this._grid.collapseItem(e.target.__item);
-      }
-    }
-
-    /** @private */
-    __isLeafItem(item, itemHasChildrenPath) {
-      return !item || !item[itemHasChildrenPath];
-    }
-
-    /** @private */
-    __getToggleContent(path, item) {
-      return path && get(path, item);
-    }
-  };

package/src/vaadin-grid-tree-toggle-mixin.d.ts

@@ -1,39 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * Fired when the `expanded` property changes.
- */
-export type GridTreeToggleExpandedChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface GridTreeToggleCustomEventMap {
-  'expanded-changed': GridTreeToggleExpandedChangedEvent;
-}
-
-export interface GridTreeToggleEventMap extends HTMLElementEventMap, GridTreeToggleCustomEventMap {}
-
-export declare function GridTreeToggleMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<GridTreeToggleMixinClass> & T;
-
-declare class GridTreeToggleMixinClass {
-  /**
-   * Current level of the tree represented with a horizontal offset
-   * of the toggle button.
-   */
-  level: number;
-
-  /**
-   * Hides the toggle icon and disables toggling a tree sublevel.
-   */
-  leaf: boolean;
-
-  /**
-   * Sublevel toggle state.
-   */
-  expanded: boolean;
-}

package/src/vaadin-grid-tree-toggle-mixin.js

@@ -1,151 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { isFocusable } from './vaadin-grid-active-item-mixin.js';
-
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    @font-face {
-      font-family: "vaadin-grid-tree-icons";
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAA0AAAAABrwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAECAAAABoAAAAcgHwa6EdERUYAAAPsAAAAHAAAAB4AJwAOT1MvMgAAAZQAAAA/AAAAYA8TBIJjbWFwAAAB8AAAAFUAAAFeGJvXWmdhc3AAAAPkAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAABLAAAAhIrPOhFoZWFkAAABMAAAACsAAAA2DsJI02hoZWEAAAFcAAAAHQAAACQHAgPHaG10eAAAAdQAAAAZAAAAHAxVAgBsb2NhAAACSAAAABIAAAASAIAAVG1heHAAAAF8AAAAGAAAACAACgAFbmFtZQAAAqgAAAECAAACTwflzbdwb3N0AAADrAAAADYAAABZQ7Ajh3icY2BkYGAA4twv3Vfi+W2+MnCzMIDANSOmbGSa2YEZRHEwMIEoAAoiB6sAeJxjYGRgYD7w/wADAwsDCDA7MDAyoAI2AFEEAtIAAAB4nGNgZGBg4GBgZgDRDAxMDGgAAAGbABB4nGNgZp7JOIGBlYGBaSbTGQYGhn4IzfiawZiRkwEVMAqgCTA4MDA+38d84P8BBgdmIAapQZJVYGAEAGc/C54AeJxjYYAAxlAIzQTELAwMBxgZGB0ACy0BYwAAAHicY2BgYGaAYBkGRgYQiADyGMF8FgYbIM3FwMHABISMDArP9/3/+/8/WJXC8z0Q9v8nEp5gHVwMMMAIMo+RDYiZoQJMQIKJARUA7WBhGN4AACFKDtoAAAAAAAAAAAgACAAQABgAJgA0AEIAAHichYvBEYBADAKBVHBjBT4swl9KS2k05o0XHd/yW1hAfBFwCv9sIlJu3nZaNS3PXAaXXHI8Lge7DlzF7C1RgXc7xkK6+gvcD2URmQB4nK2RQWoCMRiFX3RUqtCli65yADModOMBLLgQSqHddRFnQghIAnEUvEA3vUUP0LP0Fj1G+yb8R5iEhO9/ef/7FwFwj28o9EthiVp4hBlehcfUP4Ur8o/wBAv8CU+xVFvhOR7UB7tUdUdlVRJ6HnHWTnhM/V24In8JT5j/KzzFSi2E53hUz7jCcrcIiDDwyKSW1JEct2HdIPH1DFytbUM0PofWdNk5E5oUqb/Q6HHBiVGZpfOXkyUMEj5IyBuNmYZQjBobfsuassvnkKLe1OuBBj0VQ8cRni2xjLWsHaM0jrjx3peYA0/vrdmUYqe9iy7bzrX6eNP7Jh1SijX+AaUVbB8AAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSruZMzlHaB0q4A76kLlwAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKxJigiD6mhFTNowGACmcA/8AAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);
-
-registerStyles(
-  'vaadin-grid-tree-toggle',
-  css`
-    :host {
-      display: inline-flex;
-      align-items: baseline;
-      max-width: 100%;
-
-      /* CSS API for :host */
-      --vaadin-grid-tree-toggle-level-offset: 1em;
-      --_collapsed-icon: '\\e7be\\00a0';
-    }
-
-    :host([dir='rtl']) {
-      --_collapsed-icon: '\\e7bd\\00a0';
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    :host(:not([leaf])) {
-      cursor: pointer;
-    }
-
-    #level-spacer,
-    [part='toggle'] {
-      flex: none;
-    }
-
-    #level-spacer {
-      display: inline-block;
-      width: calc(var(---level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
-    }
-
-    [part='toggle']::before {
-      font-family: 'vaadin-grid-tree-icons';
-      line-height: 1em; /* make icon font metrics not affect baseline */
-    }
-
-    :host(:not([expanded])) [part='toggle']::before {
-      content: var(--_collapsed-icon);
-    }
-
-    :host([expanded]) [part='toggle']::before {
-      content: '\\e7bc\\00a0'; /* icon glyph + single non-breaking space */
-    }
-
-    :host([leaf]) [part='toggle'] {
-      visibility: hidden;
-    }
-
-    slot {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `,
-  { moduleId: 'vaadin-grid-tree-toggle-styles' },
-);
-
-/**
- * @polymerMixin
- */
-export const GridTreeToggleMixin = (superClass) =>
-  class extends superClass {
-    static get properties() {
-      return {
-        /**
-         * Current level of the tree represented with a horizontal offset
-         * of the toggle button.
-         * @type {number}
-         */
-        level: {
-          type: Number,
-          value: 0,
-          observer: '_levelChanged',
-        },
-
-        /**
-         * Hides the toggle icon and disables toggling a tree sublevel.
-         * @type {boolean}
-         */
-        leaf: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * Sublevel toggle state.
-         * @type {boolean}
-         */
-        expanded: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-          notify: true,
-        },
-      };
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addEventListener('click', (e) => this._onClick(e));
-    }
-
-    /** @private */
-    _onClick(e) {
-      if (this.leaf) {
-        return;
-      }
-      if (isFocusable(e.target) || e.target instanceof HTMLLabelElement) {
-        return;
-      }
-
-      e.preventDefault();
-      this.expanded = !this.expanded;
-    }
-
-    /** @private */
-    _levelChanged(level) {
-      const value = Number(level).toString();
-      this.style.setProperty('---level', value);
-    }
-  };