@api-client/ui 0.0.4 → 0.0.7

package/dist/ui/list/UiDropdownList.js

@@ -27,53 +27,6 @@ const itemRole = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
  * @fires open - An event dispatched when the open state change through a user interaction
  */
 export default class UiDropdownList extends LitElement {
-    triggers;
-    dropdowns;
-    triggerId = `ui-trigger-${randomString(4)}`;
-    menuId = `ui-menu-${randomString(4)}`;
-    /**
-     * Whether the menu is opened.
-     * @attribute
-     */
-    open = false;
-    /**
-     * The vertical (y-axis) alignment of the dropdown content.
-     * - top
-     * - bottom
-     * - middle
-     *
-     * No value means the natural position according to the box model.
-     * @attribute
-     */
-    verticalAlign;
-    /**
-     * The horizontal (x-axis) alignment of the dropdown content.
-     * - top
-     * - bottom
-     * - middle
-     *
-     * No value means the natural position according to the box model.
-     * @attribute
-     */
-    horizontalAlign;
-    /**
-     * Affects the `horizontal` and `vertical` positioning so that the target element does not overlap with the anchor.
-     * For example, when the `vertical` align is `top`, the top edge of the target will be rendered at the bottom
-     * of the anchor down to the edge of the viewport.
-     * @attribute
-     */
-    noOverlap;
-    /**
-     * When set it closes the opened list when registering a click outside the list.
-     * @attribute
-     */
-    closeOnOutsideClick;
-    /**
-     * When set it makes the drop-down to match the width of the trigger.
-     * Be careful as this may crop the content when the trigger is not wide enough.
-     * @attribute
-     */
-    matchTriggerWidth;
     /**
      * The first element located in the default slot.
      */
@@ -96,9 +49,15 @@ export default class UiDropdownList extends LitElement {
         const [content] = dropdowns;
         return content;
     }
-    overlayPositioning;
     constructor() {
         super();
+        this.triggerId = `ui-trigger-${randomString(4)}`;
+        this.menuId = `ui-menu-${randomString(4)}`;
+        /**
+         * Whether the menu is opened.
+         * @attribute
+         */
+        this.open = false;
         this.dropdownOpenHandler = this.dropdownOpenHandler.bind(this);
         this.scrollHandler = this.scrollHandler.bind(this);
         this.clickHandler = this.clickHandler.bind(this);

package/dist/ui/list/UiDropdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiDropdownList.js","sourceRoot":"","sources":["../../../src/ui/list/UiDropdownList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { randomString } from \"../../lib/Random.js\";\nimport { ElementPositioning, HorizontalAlignment, VerticalAlignment } from \"../lib/ElementPositioning.js\";\nimport { ScrollHelper } from \"../lib/ScrollHelper.js\";\n\nconst itemRole = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n\nexport interface UiDropdownListSelection {\n  item: HTMLElement;\n}\n\n/**\n * An overlay list rendered over a button.\n * \n * Examples:\n * \n * <ui-dropdown-list>\n *  <ui-button>Click me</ui-button>\n *  <ui-list slot=\"dropdown\" role=\"menu\">\n *    <ui-list-item role=\"menuitem\">Item 1</ui-list-item>\n *    <ui-list-item role=\"menuitem\">Item 2</ui-list-item>\n *  </ui-list>\n * </ui-dropdown-list>\n * \n * @slot - The default slot for the dropdown trigger (button) \n * @slot dropdown - The slot for the list.\n * @fires select - Custom event with the selected item on the `detail.item` when the user selected an item.\n * @fires dropdownopen - An event informing other dropdowns that this one was opened and other should close.\n * @fires open - An event dispatched when the open state change through a user interaction\n */\nexport default class UiDropdownList extends LitElement {\n  @queryAssignedElements()\n  protected triggers!: HTMLElement[] | null;\n\n  @queryAssignedElements({ slot: 'dropdown' })\n  protected dropdowns!: HTMLElement[] | null;\n\n  @state() protected triggerId = `ui-trigger-${randomString(4)}`;\n\n  @state() protected menuId = `ui-menu-${randomString(4)}`;\n\n  /**\n   * Whether the menu is opened.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The vertical (y-axis) alignment of the dropdown content.\n   * - top\n   * - bottom\n   * - middle\n   * \n   * No value means the natural position according to the box model.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) verticalAlign?: VerticalAlignment;\n\n  /**\n   * The horizontal (x-axis) alignment of the dropdown content.\n   * - top\n   * - bottom\n   * - middle\n   * \n   * No value means the natural position according to the box model.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) horizontalAlign?: HorizontalAlignment;\n\n  /**\n   * Affects the `horizontal` and `vertical` positioning so that the target element does not overlap with the anchor.\n   * For example, when the `vertical` align is `top`, the top edge of the target will be rendered at the bottom \n   * of the anchor down to the edge of the viewport.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) noOverlap?: boolean;\n\n  /**\n   * When set it closes the opened list when registering a click outside the list.\n   * @attribute\n   */\n  @property({ type: Boolean }) closeOnOutsideClick?: boolean;\n\n  /**\n   * When set it makes the drop-down to match the width of the trigger.\n   * Be careful as this may crop the content when the trigger is not wide enough.\n   * @attribute\n   */\n  @property({ type: Boolean }) matchTriggerWidth?: boolean;\n\n  /**\n   * The first element located in the default slot.\n   */\n  protected get trigger(): HTMLElement | null {\n    const { triggers } = this;\n    if (!triggers || !triggers.length) {\n      return null;\n    }\n    const [button] = triggers;\n    return button;\n  }\n\n  /**\n   * The first element located in the \"dropdown\" slot.\n   */\n  protected get dropdown(): HTMLElement | null {\n    const { dropdowns } = this;\n    if (!dropdowns || !dropdowns.length) {\n      return null;\n    }\n    const [content] = dropdowns;\n    return content;\n  }\n\n  @state() protected overlayPositioning?: StyleInfo;\n\n  constructor() {\n    super();\n    this.dropdownOpenHandler = this.dropdownOpenHandler.bind(this);\n    this.scrollHandler = this.scrollHandler.bind(this);\n    this.clickHandler = this.clickHandler.bind(this);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('dropdownopen', this.dropdownOpenHandler);\n    window.addEventListener('click', this.clickHandler, { capture: true });\n    ScrollHelper.addListeners(this, this.scrollHandler);\n\n    this.setAttribute('aria-haspopup', 'menu');\n    this.setAttribute('aria-expanded', 'false');\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('dropdownopen', this.dropdownOpenHandler);\n    window.removeEventListener('click', this.clickHandler, { capture: true });\n    ScrollHelper.removeListeners(this);\n  }\n\n  protected dropdownOpenHandler(e: Event): void {\n    if (e.composedPath()[0] === this) {\n      return;\n    }\n    this.open = false;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected updateExpanded(): void {\n    this.setAttribute('aria-expanded', String(this.open));\n  }\n\n  protected triggerChanged(): void {\n    const { trigger } = this;\n    if (!trigger) {\n      return;\n    }\n    this.decorateTrigger(trigger);\n  }\n\n  protected dropdownChanged(): void {\n    const { dropdown } = this;\n    if (!dropdown) {\n      return;\n    }\n    this.decorateDropdown(dropdown);\n  }\n\n  /**\n   * Decorates the trigger with aria attributes.\n   */\n  protected decorateTrigger(button: HTMLElement): void {\n    button.setAttribute('aria-controls', this.menuId);\n    button.setAttribute('tabindex', '0');\n    if (button.id) {\n      this.triggerId = button.id;\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      button.id = this.triggerId;\n    }\n  }\n\n  protected decorateDropdown(list: HTMLElement): void {\n    if (!list.hasAttribute('role')) {\n      list.setAttribute('role', 'menu');\n    }\n    if (!list.hasAttribute('aria-labelledby')) {\n      list.setAttribute('aria-labelledby', this.triggerId);\n    }\n    list.setAttribute('tabindex', '-1');\n    // eslint-disable-next-line no-param-reassign\n    list.id = this.menuId;\n  }\n\n  protected triggerClickHandler(): void {\n    this.open = !this.open;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected triggerKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space', 'ArrowDown', 'ArrowUp'].includes(e.code)) {\n      e.preventDefault();\n      this.open = true;\n      this.updateExpanded();\n      this.notifyOpen();\n    }\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (e.code === 'Escape' || e.code === 'Tab') {\n      this.open = false;\n      this.updateExpanded();\n      this.notifyOpen();\n    } else if (['Enter', 'Space'].includes(e.code)) {\n      this.activate(e);\n    }\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activate(e);\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp);\n    if ((cp.has('noOverlap') || cp.has('verticalAlign') || cp.has('horizontalAlign') || cp.has('open')) && this.open) {\n      this.computePositioning();\n    }\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    super.updated(cp);\n    if (cp.has('open')) {\n      this.toggleOpened();\n    }\n  }\n\n  /**\n   * Since the container for the dropdown content is positioned as fixed\n   * we need to position the dropdown according to the configured rules.\n   */\n  protected computePositioning(): void {\n    const { trigger, dropdown } = this;\n    if (!trigger || !dropdown) {\n      return;\n    }\n    this.overlayPositioning = ElementPositioning.positionOverlay(dropdown, trigger, {\n      horizontal: this.horizontalAlign,\n      vertical: this.verticalAlign,\n      noOverlap: this.noOverlap,\n      constrain: true,\n      constrainPaddingY: 20,\n      matchAnchorWidth: this.matchTriggerWidth,\n    });\n  }\n\n  protected scrollHandler(): void {\n    if (this.open) {\n      this.computePositioning();\n    }\n  }\n\n  protected clickHandler(e: Event): void {\n    if (!this.open || !this.closeOnOutsideClick) {\n      return;\n    }\n    const inside = e.composedPath().some(i => i === this);\n    if (inside) {\n      return;\n    }\n    this.open = false;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected toggleOpened(): void {\n    const { open } = this;\n    if (open) {\n      this.handleOpened();\n    } else {\n      this.handleClosed();\n    }\n  }\n\n  protected handleOpened(): void {\n    const { trigger, dropdown } = this;\n    if (trigger) {\n      trigger.removeAttribute('tabindex');\n    }\n    if (dropdown) {\n      dropdown.setAttribute('tabindex', '0');\n      dropdown.focus();\n    }\n  }\n\n  protected handleClosed(): void {\n    const { trigger, dropdown } = this;\n    if (trigger) {\n      trigger.setAttribute('tabindex', '0');\n      if (this.matches(':focus-within')) {\n        trigger.focus();\n      }\n    }\n    if (dropdown) {\n      dropdown.removeAttribute('tabindex');\n    }\n  }\n\n  protected activate(e: Event): void {\n    const path = e.composedPath();\n    let item: HTMLElement | undefined;\n    while (!item) {\n      const next = path.shift() as Element;\n      if (next === this) {\n        break;\n      }\n      if (next.nodeType !== Node.ELEMENT_NODE) {\n        continue;\n      }\n      if (itemRole.includes(next.getAttribute('role') || '')) {\n        item = next as HTMLElement;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.dispatchEvent(new CustomEvent<UiDropdownListSelection>('select', {\n      detail: {\n        item,\n      }\n    }));\n    this.open = false;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected notifyOpen(): void {\n    this.dispatchEvent(new Event('open'));\n    if (this.open) {\n      this.dispatchEvent(new Event('dropdownopen', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n      }));\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const classes: ClassInfo = {\n      container: true,\n      open: this.open,\n    };\n    \n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderTrigger()}\n      ${this.renderContent()}\n    </div>\n    `;\n  }\n\n  protected renderTrigger(): TemplateResult {\n    return html`\n    <div \n      class=\"trigger\" \n      @click=\"${this.triggerClickHandler}\" \n      @keydown=\"${this.triggerKeyDownHandler}\"\n    ><slot @slotchange=\"${this.triggerChanged}\"></slot></div>\n    `;\n  }\n\n  protected renderContent(): TemplateResult {\n    const contentStyles = this.overlayPositioning || {};\n    return html`\n    <div \n      class=\"content\" \n      style=\"${styleMap(contentStyles)}\"\n    >\n      <slot \n        name=\"dropdown\" \n        @slotchange=\"${this.dropdownChanged}\" \n        @keydown=\"${this.contentKeyDownHandler}\" \n        @click=\"${this.contentClickHandler}\"\n      ></slot>\n    </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"UiDropdownList.js","sourceRoot":"","sources":["../../../src/ui/list/UiDropdownList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { StyleInfo, styleMap } from \"lit/directives/style-map.js\";\nimport { randomString } from \"../../lib/Random.js\";\nimport { ElementPositioning, HorizontalAlignment, VerticalAlignment } from \"../lib/ElementPositioning.js\";\nimport { ScrollHelper } from \"../lib/ScrollHelper.js\";\n\nconst itemRole = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n\nexport interface UiDropdownListSelection {\n  item: HTMLElement;\n}\n\n/**\n * An overlay list rendered over a button.\n * \n * Examples:\n * \n * <ui-dropdown-list>\n *  <ui-button>Click me</ui-button>\n *  <ui-list slot=\"dropdown\" role=\"menu\">\n *    <ui-list-item role=\"menuitem\">Item 1</ui-list-item>\n *    <ui-list-item role=\"menuitem\">Item 2</ui-list-item>\n *  </ui-list>\n * </ui-dropdown-list>\n * \n * @slot - The default slot for the dropdown trigger (button) \n * @slot dropdown - The slot for the list.\n * @fires select - Custom event with the selected item on the `detail.item` when the user selected an item.\n * @fires dropdownopen - An event informing other dropdowns that this one was opened and other should close.\n * @fires open - An event dispatched when the open state change through a user interaction\n */\nexport default class UiDropdownList extends LitElement {\n  @queryAssignedElements()\n  protected triggers!: HTMLElement[] | null;\n\n  @queryAssignedElements({ slot: 'dropdown' })\n  protected dropdowns!: HTMLElement[] | null;\n\n  @state() protected triggerId = `ui-trigger-${randomString(4)}`;\n\n  @state() protected menuId = `ui-menu-${randomString(4)}`;\n\n  /**\n   * Whether the menu is opened.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The vertical (y-axis) alignment of the dropdown content.\n   * - top\n   * - bottom\n   * - middle\n   * \n   * No value means the natural position according to the box model.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) verticalAlign?: VerticalAlignment;\n\n  /**\n   * The horizontal (x-axis) alignment of the dropdown content.\n   * - top\n   * - bottom\n   * - middle\n   * \n   * No value means the natural position according to the box model.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) horizontalAlign?: HorizontalAlignment;\n\n  /**\n   * Affects the `horizontal` and `vertical` positioning so that the target element does not overlap with the anchor.\n   * For example, when the `vertical` align is `top`, the top edge of the target will be rendered at the bottom \n   * of the anchor down to the edge of the viewport.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) noOverlap?: boolean;\n\n  /**\n   * When set it closes the opened list when registering a click outside the list.\n   * @attribute\n   */\n  @property({ type: Boolean }) closeOnOutsideClick?: boolean;\n\n  /**\n   * When set it makes the drop-down to match the width of the trigger.\n   * Be careful as this may crop the content when the trigger is not wide enough.\n   * @attribute\n   */\n  @property({ type: Boolean }) matchTriggerWidth?: boolean;\n\n  /**\n   * The first element located in the default slot.\n   */\n  protected get trigger(): HTMLElement | null {\n    const { triggers } = this;\n    if (!triggers || !triggers.length) {\n      return null;\n    }\n    const [button] = triggers;\n    return button;\n  }\n\n  /**\n   * The first element located in the \"dropdown\" slot.\n   */\n  protected get dropdown(): HTMLElement | null {\n    const { dropdowns } = this;\n    if (!dropdowns || !dropdowns.length) {\n      return null;\n    }\n    const [content] = dropdowns;\n    return content;\n  }\n\n  @state() protected overlayPositioning?: StyleInfo;\n\n  constructor() {\n    super();\n    this.dropdownOpenHandler = this.dropdownOpenHandler.bind(this);\n    this.scrollHandler = this.scrollHandler.bind(this);\n    this.clickHandler = this.clickHandler.bind(this);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('dropdownopen', this.dropdownOpenHandler);\n    window.addEventListener('click', this.clickHandler, { capture: true });\n    ScrollHelper.addListeners(this, this.scrollHandler);\n\n    this.setAttribute('aria-haspopup', 'menu');\n    this.setAttribute('aria-expanded', 'false');\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('dropdownopen', this.dropdownOpenHandler);\n    window.removeEventListener('click', this.clickHandler, { capture: true });\n    ScrollHelper.removeListeners(this);\n  }\n\n  protected dropdownOpenHandler(e: Event): void {\n    if (e.composedPath()[0] === this) {\n      return;\n    }\n    this.open = false;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected updateExpanded(): void {\n    this.setAttribute('aria-expanded', String(this.open));\n  }\n\n  protected triggerChanged(): void {\n    const { trigger } = this;\n    if (!trigger) {\n      return;\n    }\n    this.decorateTrigger(trigger);\n  }\n\n  protected dropdownChanged(): void {\n    const { dropdown } = this;\n    if (!dropdown) {\n      return;\n    }\n    this.decorateDropdown(dropdown);\n  }\n\n  /**\n   * Decorates the trigger with aria attributes.\n   */\n  protected decorateTrigger(button: HTMLElement): void {\n    button.setAttribute('aria-controls', this.menuId);\n    button.setAttribute('tabindex', '0');\n    if (button.id) {\n      this.triggerId = button.id;\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      button.id = this.triggerId;\n    }\n  }\n\n  protected decorateDropdown(list: HTMLElement): void {\n    if (!list.hasAttribute('role')) {\n      list.setAttribute('role', 'menu');\n    }\n    if (!list.hasAttribute('aria-labelledby')) {\n      list.setAttribute('aria-labelledby', this.triggerId);\n    }\n    list.setAttribute('tabindex', '-1');\n    // eslint-disable-next-line no-param-reassign\n    list.id = this.menuId;\n  }\n\n  protected triggerClickHandler(): void {\n    this.open = !this.open;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected triggerKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space', 'ArrowDown', 'ArrowUp'].includes(e.code)) {\n      e.preventDefault();\n      this.open = true;\n      this.updateExpanded();\n      this.notifyOpen();\n    }\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (e.code === 'Escape' || e.code === 'Tab') {\n      this.open = false;\n      this.updateExpanded();\n      this.notifyOpen();\n    } else if (['Enter', 'Space'].includes(e.code)) {\n      this.activate(e);\n    }\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activate(e);\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp);\n    if ((cp.has('noOverlap') || cp.has('verticalAlign') || cp.has('horizontalAlign') || cp.has('open')) && this.open) {\n      this.computePositioning();\n    }\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    super.updated(cp);\n    if (cp.has('open')) {\n      this.toggleOpened();\n    }\n  }\n\n  /**\n   * Since the container for the dropdown content is positioned as fixed\n   * we need to position the dropdown according to the configured rules.\n   */\n  protected computePositioning(): void {\n    const { trigger, dropdown } = this;\n    if (!trigger || !dropdown) {\n      return;\n    }\n    this.overlayPositioning = ElementPositioning.positionOverlay(dropdown, trigger, {\n      horizontal: this.horizontalAlign,\n      vertical: this.verticalAlign,\n      noOverlap: this.noOverlap,\n      constrain: true,\n      constrainPaddingY: 20,\n      matchAnchorWidth: this.matchTriggerWidth,\n    });\n  }\n\n  protected scrollHandler(): void {\n    if (this.open) {\n      this.computePositioning();\n    }\n  }\n\n  protected clickHandler(e: Event): void {\n    if (!this.open || !this.closeOnOutsideClick) {\n      return;\n    }\n    const inside = e.composedPath().some(i => i === this);\n    if (inside) {\n      return;\n    }\n    this.open = false;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected toggleOpened(): void {\n    const { open } = this;\n    if (open) {\n      this.handleOpened();\n    } else {\n      this.handleClosed();\n    }\n  }\n\n  protected handleOpened(): void {\n    const { trigger, dropdown } = this;\n    if (trigger) {\n      trigger.removeAttribute('tabindex');\n    }\n    if (dropdown) {\n      dropdown.setAttribute('tabindex', '0');\n      dropdown.focus();\n    }\n  }\n\n  protected handleClosed(): void {\n    const { trigger, dropdown } = this;\n    if (trigger) {\n      trigger.setAttribute('tabindex', '0');\n      if (this.matches(':focus-within')) {\n        trigger.focus();\n      }\n    }\n    if (dropdown) {\n      dropdown.removeAttribute('tabindex');\n    }\n  }\n\n  protected activate(e: Event): void {\n    const path = e.composedPath();\n    let item: HTMLElement | undefined;\n    while (!item) {\n      const next = path.shift() as Element;\n      if (next === this) {\n        break;\n      }\n      if (next.nodeType !== Node.ELEMENT_NODE) {\n        continue;\n      }\n      if (itemRole.includes(next.getAttribute('role') || '')) {\n        item = next as HTMLElement;\n      }\n    }\n    if (!item) {\n      return;\n    }\n    this.dispatchEvent(new CustomEvent<UiDropdownListSelection>('select', {\n      detail: {\n        item,\n      }\n    }));\n    this.open = false;\n    this.updateExpanded();\n    this.notifyOpen();\n  }\n\n  protected notifyOpen(): void {\n    this.dispatchEvent(new Event('open'));\n    if (this.open) {\n      this.dispatchEvent(new Event('dropdownopen', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n      }));\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const classes: ClassInfo = {\n      container: true,\n      open: this.open,\n    };\n    \n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderTrigger()}\n      ${this.renderContent()}\n    </div>\n    `;\n  }\n\n  protected renderTrigger(): TemplateResult {\n    return html`\n    <div \n      class=\"trigger\" \n      @click=\"${this.triggerClickHandler}\" \n      @keydown=\"${this.triggerKeyDownHandler}\"\n    ><slot @slotchange=\"${this.triggerChanged}\"></slot></div>\n    `;\n  }\n\n  protected renderContent(): TemplateResult {\n    const contentStyles = this.overlayPositioning || {};\n    return html`\n    <div \n      class=\"content\" \n      style=\"${styleMap(contentStyles)}\"\n    >\n      <slot \n        name=\"dropdown\" \n        @slotchange=\"${this.dropdownChanged}\" \n        @keydown=\"${this.contentKeyDownHandler}\" \n        @click=\"${this.contentClickHandler}\"\n      ></slot>\n    </div>\n    `;\n  }\n}\n"]}

package/dist/ui/list/UiList.js

@@ -15,23 +15,11 @@ const ACTIVATION_KEYS = {
  * @fires select - Dispatched when the user click or press `Enter` or `Space` on any active list item. The `event.detail` object contains the `item` and `index` properties.
  */
 export default class UiList extends LitElement {
-    items = [];
-    activeListItem = null;
-    highlightListItem = null;
-    /**
-     * The CSS selector that is used to recognize which items are
-     * active list items (can be selected, focused, etc.)
-     * @attribute
-     */
-    selector;
-    /**
-     * When set it marks last activated list item as selected.
-     * @attribute
-     */
-    selectActive;
-    assignedElements;
     constructor() {
         super();
+        this.items = [];
+        this.activeListItem = null;
+        this.highlightListItem = null;
         this.selector = 'ui-list-item';
         this.addEventListener('keydown', this.handleKeydown.bind(this));
         this.addEventListener('click', this.handleClick.bind(this));

package/dist/ui/list/UiList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiList.js","sourceRoot":"","sources":["../../../src/ui/list/UiList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport UiListItem from \"./UiListItem.js\";\n\nconst NAVIGATION_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n};\n\nconst ACTIVATION_KEYS = {\n  Enter: 'Enter',\n  Space: ' ',\n};\n\nexport interface UiListSelection {\n  item: HTMLElement,\n  index: number,\n}\n\n/**\n * @fires select - Dispatched when the user click or press `Enter` or `Space` on any active list item. The `event.detail` object contains the `item` and `index` properties.\n */\nexport default class UiList extends LitElement {\n  items: UiListItem[] = [];\n\n  activeListItem: UiListItem | null = null;\n\n  highlightListItem: UiListItem | null = null;\n\n  /**\n   * The CSS selector that is used to recognize which items are \n   * active list items (can be selected, focused, etc.)\n   * @attribute\n   */\n  @property({ type: String }) selector: string;\n\n  /**\n   * When set it marks last activated list item as selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) selectActive?: boolean;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  constructor() {\n    super();\n    this.selector = 'ui-list-item';\n    this.addEventListener('keydown', this.handleKeydown.bind(this));\n    this.addEventListener('click', this.handleClick.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n\n    this.updateItems();\n  }\n\n  activateFirstItem(): void {\n    this.activeListItem = this.getFirstItem();\n    this.activeListItem.activate();\n  }\n\n  activateLastItem(): void {\n    this.activeListItem = this.getLastItem();\n    this.activeListItem?.activate();\n  }\n\n  resetActiveListItem(): void {\n    this.activeListItem = null;\n    this.setAttribute('tabindex', '0');\n  }\n\n  protected updateItems(): void {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isListItem, this);\n    this.items = items;\n    if (this.activeListItem && !items.includes(this.activeListItem)) {\n      this.activeListItem = null;\n    }\n    if (this.highlightListItem && !items.includes(this.highlightListItem)) {\n      this.highlightListItem = null;\n    }\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isListItem(element: Element): element is UiListItem {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.matches(this.selector);\n  }\n\n  getFirstItem(): UiListItem {\n    return this.items[0];\n  }\n\n  getLastItem(): UiListItem {\n    return this.items[this.items.length - 1];\n  }\n\n  getPreviousItem(item: UiListItem): UiListItem {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiListItem || item;\n  }\n\n  getNextItem(item: UiListItem): UiListItem {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiListItem || item;\n  }\n\n  protected isSelectable(element: HTMLElement): boolean {\n    if ((element as unknown as { disabled: boolean }).disabled) {\n      return false;\n    }\n    if (element.hasAttribute('disabled')) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected isListItemActive(item: UiListItem): boolean {\n    return item.isActive();\n  }\n\n  protected deactivateListItem(item: UiListItem): void {\n    item.deactivate();\n  }\n\n  protected activateListItem(item: UiListItem): void {\n    this.removeAttribute('tabindex');\n    item.activate();\n    item.scrollIntoView({ block: \"end\", inline: \"nearest\" });\n  }\n\n  handleKeydown(event: KeyboardEvent): void {\n    if (Object.values(ACTIVATION_KEYS).includes(event.key)) {\n      this.activateFromEvent(event);\n      return;\n    }\n    if (Object.values(NAVIGATION_KEYS).indexOf(event.key) === -1) return;\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item;\n      }\n\n      this.deactivateListItem(item);\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowDown) {\n      event.preventDefault();\n      this.activateNext();\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowUp) {\n      event.preventDefault();\n      this.activatePrevious();\n    }\n\n    if (event.key === NAVIGATION_KEYS.Home) {\n      event.preventDefault();\n      this.activateFirst();\n    }\n\n    if (event.key === NAVIGATION_KEYS.End) {\n      event.preventDefault();\n      this.activateLast();\n    }\n  }\n\n  activateFirst(): void {\n    this.activeListItem = this.getFirstItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  activateLast(): void {\n    this.activeListItem = this.getLastItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  activateNext(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getNextItem(item) : this.getFirstItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  activatePrevious(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getPreviousItem(item) : this.getLastItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  /**\n   * Sets `highlight` class on the next item.\n   * @param item When not set it highlights the first item. Default to `this.highlightListItem`. Pass `null` to select first item.\n   */\n  highlightNext(item = this.highlightListItem): void {\n    const next = item ? this.getNextItem(item) : this.getFirstItem();\n    this.highlightItem(next);\n  }\n\n  /**\n   * Sets `highlight` class on the previous item.\n   * @param item When not set it highlights the last item. Default to `this.highlightListItem`. Pass `null` to select last item.\n   */\n  highlightPrevious(item = this.highlightListItem): void {\n    const previous = item ? this.getPreviousItem(item) : this.getLastItem();\n    this.highlightItem(previous);\n  }\n\n  highlightFirst(): void {\n    const item = this.getFirstItem();\n    this.highlightItem(item);\n  }\n\n  highlightLast(): void {\n    const item = this.getLastItem();\n    this.highlightItem(item);\n  }\n\n  handleClick(event: MouseEvent): void {\n    this.activateFromEvent(event);\n  }\n\n  protected highlightItem(item?: UiListItem): void {\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.remove('highlight');\n    }\n    this.highlightListItem = item || null;\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.add('highlight');\n      this.highlightListItem.scrollIntoView({ block: \"end\", inline: \"nearest\" });\n    }\n  }\n\n  /**\n   * Activates a list item from an Event.\n   * Activate means dispatches a non-bubbling CustomEvent with the item in the detail.\n   */\n  protected activateFromEvent(e: Event): void {\n    const path = e.composedPath();\n    let item: UiListItem | undefined;\n    while (!item) {\n      const next = path.shift() as Element;\n      if (next === this) {\n        break;\n      }\n      if (!this.isListItem(next) || !this.isSelectable(next)) {\n        continue;\n      }\n      item = next as UiListItem;\n    }\n    if (!item) {\n      return;\n    }\n    this.manageSelection(item);\n    item.activate();\n    this.activeListItem = item;\n    this.notifySelect(item);\n  }\n\n  notifySelect(item: UiListItem): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    this.dispatchEvent(new CustomEvent<UiListSelection>('select', {\n      detail: {\n        item,\n        index,\n      }\n    }));\n  }\n\n  protected manageSelection(item: UiListItem): void {\n    if (!this.selectActive) {\n      return;\n    }\n    const { activeListItem } = this;\n    if (activeListItem) {\n      activeListItem.classList.remove('select');\n    }\n    item.classList.add('select');\n  }\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=\"${this.updateItems}\"></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"UiList.js","sourceRoot":"","sources":["../../../src/ui/list/UiList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport UiListItem from \"./UiListItem.js\";\n\nconst NAVIGATION_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n};\n\nconst ACTIVATION_KEYS = {\n  Enter: 'Enter',\n  Space: ' ',\n};\n\nexport interface UiListSelection {\n  item: HTMLElement,\n  index: number,\n}\n\n/**\n * @fires select - Dispatched when the user click or press `Enter` or `Space` on any active list item. The `event.detail` object contains the `item` and `index` properties.\n */\nexport default class UiList extends LitElement {\n  items: UiListItem[] = [];\n\n  activeListItem: UiListItem | null = null;\n\n  highlightListItem: UiListItem | null = null;\n\n  /**\n   * The CSS selector that is used to recognize which items are \n   * active list items (can be selected, focused, etc.)\n   * @attribute\n   */\n  @property({ type: String }) selector: string;\n\n  /**\n   * When set it marks last activated list item as selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) selectActive?: boolean;\n\n  @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;\n\n  constructor() {\n    super();\n    this.selector = 'ui-list-item';\n    this.addEventListener('keydown', this.handleKeydown.bind(this));\n    this.addEventListener('click', this.handleClick.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n\n    this.updateItems();\n  }\n\n  activateFirstItem(): void {\n    this.activeListItem = this.getFirstItem();\n    this.activeListItem.activate();\n  }\n\n  activateLastItem(): void {\n    this.activeListItem = this.getLastItem();\n    this.activeListItem?.activate();\n  }\n\n  resetActiveListItem(): void {\n    this.activeListItem = null;\n    this.setAttribute('tabindex', '0');\n  }\n\n  protected updateItems(): void {\n    const elements = this.assignedElements || [];\n    const items = elements.filter(this.isListItem, this);\n    this.items = items;\n    if (this.activeListItem && !items.includes(this.activeListItem)) {\n      this.activeListItem = null;\n    }\n    if (this.highlightListItem && !items.includes(this.highlightListItem)) {\n      this.highlightListItem = null;\n    }\n  }\n\n  /** \n   * @return Whether the given element is a list item element. \n   */\n  protected isListItem(element: Element): element is UiListItem {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false;\n    }\n    return element.matches(this.selector);\n  }\n\n  getFirstItem(): UiListItem {\n    return this.items[0];\n  }\n\n  getLastItem(): UiListItem {\n    return this.items[this.items.length - 1];\n  }\n\n  getPreviousItem(item: UiListItem): UiListItem {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let result: HTMLElement | undefined;\n    do {\n      i--;\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = items.length;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp;\n      }\n    } while (!result);\n    return result as UiListItem || item;\n  }\n\n  getNextItem(item: UiListItem): UiListItem {\n    const { items } = this;\n    const curIndex = items.indexOf(item);\n    if (curIndex < 0) {\n      return item;\n    }\n    let i = curIndex;\n    let next: HTMLElement | undefined;\n    do {\n      i++;\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item;\n      }\n      const tmp = items[i];\n      if (!tmp) {\n        i = -1;\n        continue;\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp;\n      }\n    } while (!next);\n    return next as UiListItem || item;\n  }\n\n  protected isSelectable(element: HTMLElement): boolean {\n    if ((element as unknown as { disabled: boolean }).disabled) {\n      return false;\n    }\n    if (element.hasAttribute('disabled')) {\n      return false;\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false;\n    }\n    return true;\n  }\n\n  protected isListItemActive(item: UiListItem): boolean {\n    return item.isActive();\n  }\n\n  protected deactivateListItem(item: UiListItem): void {\n    item.deactivate();\n  }\n\n  protected activateListItem(item: UiListItem): void {\n    this.removeAttribute('tabindex');\n    item.activate();\n    item.scrollIntoView({ block: \"end\", inline: \"nearest\" });\n  }\n\n  handleKeydown(event: KeyboardEvent): void {\n    if (Object.values(ACTIVATION_KEYS).includes(event.key)) {\n      this.activateFromEvent(event);\n      return;\n    }\n    if (Object.values(NAVIGATION_KEYS).indexOf(event.key) === -1) return;\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item;\n      }\n\n      this.deactivateListItem(item);\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowDown) {\n      event.preventDefault();\n      this.activateNext();\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowUp) {\n      event.preventDefault();\n      this.activatePrevious();\n    }\n\n    if (event.key === NAVIGATION_KEYS.Home) {\n      event.preventDefault();\n      this.activateFirst();\n    }\n\n    if (event.key === NAVIGATION_KEYS.End) {\n      event.preventDefault();\n      this.activateLast();\n    }\n  }\n\n  activateFirst(): void {\n    this.activeListItem = this.getFirstItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  activateLast(): void {\n    this.activeListItem = this.getLastItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  activateNext(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getNextItem(item) : this.getFirstItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  activatePrevious(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getPreviousItem(item) : this.getLastItem();\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  /**\n   * Sets `highlight` class on the next item.\n   * @param item When not set it highlights the first item. Default to `this.highlightListItem`. Pass `null` to select first item.\n   */\n  highlightNext(item = this.highlightListItem): void {\n    const next = item ? this.getNextItem(item) : this.getFirstItem();\n    this.highlightItem(next);\n  }\n\n  /**\n   * Sets `highlight` class on the previous item.\n   * @param item When not set it highlights the last item. Default to `this.highlightListItem`. Pass `null` to select last item.\n   */\n  highlightPrevious(item = this.highlightListItem): void {\n    const previous = item ? this.getPreviousItem(item) : this.getLastItem();\n    this.highlightItem(previous);\n  }\n\n  highlightFirst(): void {\n    const item = this.getFirstItem();\n    this.highlightItem(item);\n  }\n\n  highlightLast(): void {\n    const item = this.getLastItem();\n    this.highlightItem(item);\n  }\n\n  handleClick(event: MouseEvent): void {\n    this.activateFromEvent(event);\n  }\n\n  protected highlightItem(item?: UiListItem): void {\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.remove('highlight');\n    }\n    this.highlightListItem = item || null;\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.add('highlight');\n      this.highlightListItem.scrollIntoView({ block: \"end\", inline: \"nearest\" });\n    }\n  }\n\n  /**\n   * Activates a list item from an Event.\n   * Activate means dispatches a non-bubbling CustomEvent with the item in the detail.\n   */\n  protected activateFromEvent(e: Event): void {\n    const path = e.composedPath();\n    let item: UiListItem | undefined;\n    while (!item) {\n      const next = path.shift() as Element;\n      if (next === this) {\n        break;\n      }\n      if (!this.isListItem(next) || !this.isSelectable(next)) {\n        continue;\n      }\n      item = next as UiListItem;\n    }\n    if (!item) {\n      return;\n    }\n    this.manageSelection(item);\n    item.activate();\n    this.activeListItem = item;\n    this.notifySelect(item);\n  }\n\n  notifySelect(item: UiListItem): void {\n    const index = this.items.indexOf(item);\n    if (index === -1) {\n      return;\n    }\n    this.dispatchEvent(new CustomEvent<UiListSelection>('select', {\n      detail: {\n        item,\n        index,\n      }\n    }));\n  }\n\n  protected manageSelection(item: UiListItem): void {\n    if (!this.selectActive) {\n      return;\n    }\n    const { activeListItem } = this;\n    if (activeListItem) {\n      activeListItem.classList.remove('select');\n    }\n    item.classList.add('select');\n  }\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=\"${this.updateItems}\"></slot>`;\n  }\n}\n"]}

package/dist/ui/list/UiListItem.js

@@ -28,7 +28,6 @@ export var ListItemImage;
  * @slot supporting-text
  */
 export default class UiListItem extends UiElement {
-    ripple;
     /**
      * Whether the chip is disabled. The user can't interact with the chip when `true`.
      * @attribute
@@ -41,20 +40,12 @@ export default class UiListItem extends UiElement {
         setDisabled(this, value);
         this.requestUpdate('disabled', old);
     }
-    /**
-     * The number of lines to render the list template for.
-     * @default ListItemLines.one
-     * @attribute
-     */
-    lines;
-    /**
-     * The type of the list image.
-     * @default ListItemImage.icon
-     * @attribute
-     */
-    image;
     constructor() {
         super();
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.lines = ListItemLines.one;
         this.image = ListItemImage.icon;
         this.addEventListener('click', this.handleClick.bind(this));
@@ -152,10 +143,6 @@ export default class UiListItem extends UiElement {
     </div>
     `;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
     renderStart() {
         return html `<div class="start">
       <slot name="start" @slotchange=${this.handleSlotChange}></slot>

package/dist/ui/list/UiListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiListItem.js","sourceRoot":"","sources":["../../../src/ui/list/UiListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport enum ListItemLines {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n}\n\nexport enum ListItemImage {\n  icon = 'icon',\n  avatar = 'avatar',\n  image = 'image',\n  video = 'video',\n  auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n  @query('ui-ripple') ripple!: UiRipple;\n  \n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) \n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * The number of lines to render the list template for.\n   * @default ListItemLines.one\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) lines: ListItemLines;\n\n  /**\n   * The type of the list image.\n   * @default ListItemImage.icon\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) image: ListItemImage;\n\n  constructor() {\n    super();\n\n    this.lines = ListItemLines.one;\n    this.image = ListItemImage.icon;\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    this.beginPress({ positionEvent: e });\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    this.endPress({cancelled: false, actionData: {item: this}});\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.ripple.beginPress(options.positionEvent);\n  }\n\n  override endPress(options: EndPressConfig): void {\n    super.endPress(options);\n    this.ripple.endPress();\n  }\n\n  protected handlePointerEnter(e: PointerEvent): void {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e);\n\n    this.ripple.endHover();\n  }\n\n  protected handleFocus(): void {\n    this.ripple.beginFocus();\n  }\n\n  protected handleBlur(): void {\n    // if (this.matches(':focus-within')) {\n    //   return;\n    // }\n    this.ripple.endFocus();\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate(): void {\n    this.setAttribute('tabindex', '0');\n    this.focus();\n    this.ripple.beginFocus();\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive(): boolean {\n    return this.getAttribute('tabindex') === '0';\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate(): void {\n    this.removeAttribute('tabindex');\n  }\n\n  protected handleSlotChange(): void {\n    this.requestUpdate();\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n    });\n\n    return html`\n    <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      <div class=\"content\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n      </div>\n      ${this.renderRipple()}\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\">\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`;\n  }\n\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"end\">\n      <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n      <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n    </div>`;\n  }\n\n  protected renderBody(): TemplateResult {\n    const { lines = ListItemLines.one } = this;\n    const hasSupportingText = lines !== ListItemLines.one;\n    return html`\n    <div class=\"body\">\n      <span class=\"headline\"><slot></slot></span>\n      ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n    </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"UiListItem.js","sourceRoot":"","sources":["../../../src/ui/list/UiListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport enum ListItemLines {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n}\n\nexport enum ListItemImage {\n  icon = 'icon',\n  avatar = 'avatar',\n  image = 'image',\n  video = 'video',\n  auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n  @query('ui-ripple') ripple!: UiRipple;\n  \n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) \n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * The number of lines to render the list template for.\n   * @default ListItemLines.one\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) lines: ListItemLines;\n\n  /**\n   * The type of the list image.\n   * @default ListItemImage.icon\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) image: ListItemImage;\n\n  constructor() {\n    super();\n\n    this.lines = ListItemLines.one;\n    this.image = ListItemImage.icon;\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    this.beginPress({ positionEvent: e });\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    this.endPress({cancelled: false, actionData: {item: this}});\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.ripple.beginPress(options.positionEvent);\n  }\n\n  override endPress(options: EndPressConfig): void {\n    super.endPress(options);\n    this.ripple.endPress();\n  }\n\n  protected handlePointerEnter(e: PointerEvent): void {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e);\n\n    this.ripple.endHover();\n  }\n\n  protected handleFocus(): void {\n    this.ripple.beginFocus();\n  }\n\n  protected handleBlur(): void {\n    // if (this.matches(':focus-within')) {\n    //   return;\n    // }\n    this.ripple.endFocus();\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate(): void {\n    this.setAttribute('tabindex', '0');\n    this.focus();\n    this.ripple.beginFocus();\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive(): boolean {\n    return this.getAttribute('tabindex') === '0';\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate(): void {\n    this.removeAttribute('tabindex');\n  }\n\n  protected handleSlotChange(): void {\n    this.requestUpdate();\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n    });\n\n    return html`\n    <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      <div class=\"content\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n      </div>\n      ${this.renderRipple()}\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\">\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`;\n  }\n\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"end\">\n      <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n      <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n    </div>`;\n  }\n\n  protected renderBody(): TemplateResult {\n    const { lines = ListItemLines.one } = this;\n    const hasSupportingText = lines !== ListItemLines.one;\n    return html`\n    <div class=\"body\">\n      <span class=\"headline\"><slot></slot></span>\n      ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n    </div>\n    `;\n  }\n}\n"]}

package/dist/ui/list/UiListbox.js

@@ -13,7 +13,6 @@ import UiList from "./UiList.js";
  * - define a checkbox item, space toggle a checkbox.
  */
 export default class UiListbox extends UiList {
-    ariaSelectedElement;
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'listbox');

package/dist/ui/list/UiListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiListbox.js","sourceRoot":"","sources":["../../../src/ui/list/UiListbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,MAAM,MAAM,aAAa,CAAC;AAGjC;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,MAAM;IACF,mBAAmB,CAAc;IAEjE,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACvC,CAAC;IAEkB,WAAW;QAC5B,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;gBACvB,OAAO;aACR;YACD,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;gBACvC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;gBACnC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;aAC1C;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB;QACxB,IAAI,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC;QACxC,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;SAC/C;IACH,CAAC;IAES,eAAe,CAAC,IAAwB;QAChD,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACZ,6CAA6C;YAC7C,IAAI,CAAC,EAAE,GAAG,UAAU,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;SACvC;QACD,IAAI,CAAC,YAAY,CAAC,uBAAuB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;IAEkB,aAAa,CAAC,IAAiB;QAChD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAEkB,gBAAgB,CAAC,IAAgB;QAClD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;CACF;AArDgC;IAA9B,KAAK,CAAC,sBAAsB,CAAC;sDAA4C","sourcesContent":["import { query } from \"lit/decorators.js\";\nimport { randomString } from \"../../lib/Random.js\";\nimport UiList from \"./UiList.js\";\nimport UiListItem from \"./UiListItem.js\";\n\n/**\n * The listbox is used for lists from which a user may select one or more items which are static and, \n * unlike HTML <select> elements, may contain images.\n * \n * Note, this will automatically set `role` to `option` and `aria-selected` to `false` on each child\n * that is a valid list item.\n * \n * TODO:\n * - define a checkbox item, space toggle a checkbox.\n */\nexport default class UiListbox extends UiList {\n  @query('[aria-selected=true]') protected ariaSelectedElement?: UiListItem;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'listbox');\n  }\n\n  protected override updateItems(): void {\n    super.updateItems();\n    this.items.forEach(i => {\n      if (!this.isListItem(i)) {\n        return;\n      }\n      if (i.getAttribute('role') !== 'option') {\n        i.setAttribute('role', 'option');\n      }\n      if (i.hasAttribute('aria-selected')) {\n        i.setAttribute('aria-selected', 'false');\n      }\n    });\n  }\n\n  protected beforeActivation(): void {\n    this.removeAttribute('aria-activedescendant');\n    const active = this.ariaSelectedElement;\n    if (active) {\n      active.setAttribute('aria-selected', 'false');\n    }\n  }\n\n  protected afterActivation(item?: UiListItem | null): void {\n    if (!item) {\n      return;\n    }\n    item.setAttribute('aria-selected', 'true');\n    if (!item.id) {\n      // eslint-disable-next-line no-param-reassign\n      item.id = `option-${randomString(4)}`;\n    }\n    this.setAttribute('aria-activedescendant', item.id);\n  }\n\n  protected override highlightItem(item?: UiListItem): void {\n    this.beforeActivation();\n    super.highlightItem(item);\n    this.afterActivation(this.highlightListItem);\n  }\n\n  protected override activateListItem(item: UiListItem): void {\n    this.beforeActivation();\n    super.activateListItem(item);\n    this.afterActivation(this.activeListItem);\n  }\n}\n"]}
+{"version":3,"file":"UiListbox.js","sourceRoot":"","sources":["../../../src/ui/list/UiListbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,MAAM,MAAM,aAAa,CAAC;AAGjC;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,MAAM;IAGlC,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACvC,CAAC;IAEkB,WAAW;QAC5B,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;gBACvB,OAAO;aACR;YACD,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;gBACvC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE;gBACnC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;aAC1C;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB;QACxB,IAAI,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC;QACxC,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;SAC/C;IACH,CAAC;IAES,eAAe,CAAC,IAAwB;QAChD,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACZ,6CAA6C;YAC7C,IAAI,CAAC,EAAE,GAAG,UAAU,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;SACvC;QACD,IAAI,CAAC,YAAY,CAAC,uBAAuB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;IAEkB,aAAa,CAAC,IAAiB;QAChD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAEkB,gBAAgB,CAAC,IAAgB;QAClD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;CACF;AArDgC;IAA9B,KAAK,CAAC,sBAAsB,CAAC;sDAA4C","sourcesContent":["import { query } from \"lit/decorators.js\";\nimport { randomString } from \"../../lib/Random.js\";\nimport UiList from \"./UiList.js\";\nimport UiListItem from \"./UiListItem.js\";\n\n/**\n * The listbox is used for lists from which a user may select one or more items which are static and, \n * unlike HTML <select> elements, may contain images.\n * \n * Note, this will automatically set `role` to `option` and `aria-selected` to `false` on each child\n * that is a valid list item.\n * \n * TODO:\n * - define a checkbox item, space toggle a checkbox.\n */\nexport default class UiListbox extends UiList {\n  @query('[aria-selected=true]') protected ariaSelectedElement?: UiListItem;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'listbox');\n  }\n\n  protected override updateItems(): void {\n    super.updateItems();\n    this.items.forEach(i => {\n      if (!this.isListItem(i)) {\n        return;\n      }\n      if (i.getAttribute('role') !== 'option') {\n        i.setAttribute('role', 'option');\n      }\n      if (i.hasAttribute('aria-selected')) {\n        i.setAttribute('aria-selected', 'false');\n      }\n    });\n  }\n\n  protected beforeActivation(): void {\n    this.removeAttribute('aria-activedescendant');\n    const active = this.ariaSelectedElement;\n    if (active) {\n      active.setAttribute('aria-selected', 'false');\n    }\n  }\n\n  protected afterActivation(item?: UiListItem | null): void {\n    if (!item) {\n      return;\n    }\n    item.setAttribute('aria-selected', 'true');\n    if (!item.id) {\n      // eslint-disable-next-line no-param-reassign\n      item.id = `option-${randomString(4)}`;\n    }\n    this.setAttribute('aria-activedescendant', item.id);\n  }\n\n  protected override highlightItem(item?: UiListItem): void {\n    this.beforeActivation();\n    super.highlightItem(item);\n    this.afterActivation(this.highlightListItem);\n  }\n\n  protected override activateListItem(item: UiListItem): void {\n    this.beforeActivation();\n    super.activateListItem(item);\n    this.afterActivation(this.activeListItem);\n  }\n}\n"]}

package/dist/ui/notification/SnackNotifications.js

@@ -3,8 +3,7 @@ import '../../define/ui/ui-snackbar.js';
  * A class that manages user notifications via snackbars (toast messages).
  */
 export class SnackNotifications {
-    static current;
-    static stack = [];
+    static { this.stack = []; }
     static notify(message, timeoutOrInit) {
         const snack = document.createElement('ui-snackbar');
         snack.innerText = message;

package/dist/ui/notification/SnackNotifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackNotifications.js","sourceRoot":"","sources":["../../../src/ui/notification/SnackNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { Snackbar } from \"./Snackbar.js\";\nimport '../../define/ui/ui-snackbar.js';\n\nexport interface ISnackInit {\n  /**\n   * When set the snackbar does not timeout.\n   * It has to be cancelled by user interaction or programmatically.\n   * \n   * When the `cancellable` is set to false the user won't be able to dismiss the\n   * snackbar and the application must remove the snackbar after the process \n   * finish. Otherwise another snackbar won't appear.\n   * \n   * @default false\n   */\n  persistent?: boolean;\n\n  /**\n   * Whether the snackbar can be cancelled via user interaction.\n   * \n   * @default true\n   */\n  cancellable?: boolean;\n\n  /**\n   * The time in milliseconds after which the message is removed.\n   * Has not effect when `persistent` flag is set.\n   * \n   * @default 5000\n   */\n  timeout?: number;\n\n  /**\n   * The action to render next to the message.\n   * There can be only one action.\n   * It is only rendered when `actionCallback` is set.\n   */\n  actionLabel?: string;\n\n  /**\n   * The callback function called when the action was activated by the user.\n   */\n  actionCallback?: () => void;\n\n  /**\n   * Whether to render affordable \"close\" icon.\n   */\n  close?: boolean;\n\n  /**\n   * Callback called when the message was closed either by the user interaction\n   * or by a timeout.\n   * Note, it is not called when the message is closed programmatically.\n   */\n  closed?: () => void;\n}\n\ninterface INotificationInfo {\n  element: Snackbar;\n  init?: ISnackInit;\n}\n\n/**\n * A class that manages user notifications via snackbars (toast messages).\n */\nexport class SnackNotifications {\n  protected static current?: INotificationInfo;\n\n  protected static stack: INotificationInfo[] = [];\n\n  /**\n   * Notifies a user about something using default settings.\n   * @param message The message to show\n   * @param timeout Optionally the timeout after which the message will disappear.\n   */\n  static notify(message: string, timeout?: number): Snackbar;\n\n  /**\n   * Notifies the user about something with full configuration options available.\n   * @param message The message to show\n   * @param init Snack configuration options.\n   */\n  static notify(message: string, init: ISnackInit): Snackbar;\n\n  static notify(message: string, timeoutOrInit?: number | ISnackInit): Snackbar {\n    const snack = document.createElement('ui-snackbar');\n    snack.innerText = message;\n    let configInit: ISnackInit | undefined;\n\n    if (typeof timeoutOrInit === 'number') {\n      snack.timeout = timeoutOrInit;\n    } else if (timeoutOrInit) {\n      const cnf = timeoutOrInit as ISnackInit;\n      configInit = cnf;\n      if (typeof cnf.timeout === 'number') {\n        snack.timeout = cnf.timeout;\n      }\n      if (typeof cnf.persistent === 'boolean') {\n        snack.persistent = cnf.persistent;\n      }\n      if (typeof cnf.close === 'boolean') { \n        snack.close = cnf.close;\n      }\n      if (typeof cnf.cancellable === 'boolean') {\n        snack.cancellable = cnf.cancellable;\n      }\n      if (cnf.actionLabel && typeof cnf.actionCallback === 'function') {\n        snack.action = cnf.actionLabel;\n      }\n    }\n    this.stack.push({\n      element: snack,\n      init: configInit,\n    });\n    document.body.appendChild(snack);\n    snack.addEventListener('action', this.actionHandler.bind(this));\n    snack.addEventListener('open', this.openHandler.bind(this));\n    snack.addEventListener('dismiss', this.dismissHandler.bind(this));\n    setTimeout(() => {\n      this.schedule();\n    });\n    return snack;\n  }\n\n  protected static schedule(): void {\n    if (this.current) {\n      return;\n    }\n    const { stack = [] } = this;\n    const item = stack.shift();\n    if (!item) {\n      return;\n    }\n    this.current = item;\n    item.element.open = true;\n  }\n\n  protected static actionHandler(e: Event): void {\n    const target = e.target as Snackbar;\n    const info = SnackNotifications.current;\n    if (!info) {\n      return;\n    }\n    if (target !== info.element) {\n      return;\n    }\n    if (info.init && info.init.actionCallback) {\n      info.init.actionCallback();\n    }\n  }\n\n  protected static openHandler(e: Event): void {\n    const target = e.target as Snackbar;\n    if (target.open) {\n      return;\n    }\n    const info = SnackNotifications.current;\n    if (!info) {\n      return;\n    }\n    if (target !== info.element) {\n      return;\n    }\n    target.parentElement?.removeChild(target);\n    if (info.init && info.init.closed) {\n      info.init.closed();\n    }\n    SnackNotifications.current = undefined;\n    SnackNotifications.schedule();\n  }\n\n  protected static dismissHandler(e: Event): void {\n    const target = e.target as Snackbar;\n    const info = SnackNotifications.current;\n    if (!info) {\n      return;\n    }\n    if (target !== info.element) {\n      return;\n    }\n    target.parentElement?.removeChild(target);\n    SnackNotifications.current = undefined;\n    SnackNotifications.schedule();\n  }\n\n  static cancel(snack: Snackbar): void {\n    if (this.current?.element === snack) {\n      if (snack.open) {\n        // eslint-disable-next-line no-param-reassign\n        snack.open = false;\n      } else {\n        snack.parentElement?.removeChild(snack);\n        this.current = undefined;\n        SnackNotifications.schedule();\n      }\n    } else {\n      const index = this.stack.findIndex((i) => i.element === snack);\n      if (index >= 0) {\n        this.stack.splice(index, 1);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"SnackNotifications.js","sourceRoot":"","sources":["../../../src/ui/notification/SnackNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { Snackbar } from \"./Snackbar.js\";\nimport '../../define/ui/ui-snackbar.js';\n\nexport interface ISnackInit {\n  /**\n   * When set the snackbar does not timeout.\n   * It has to be cancelled by user interaction or programmatically.\n   * \n   * When the `cancellable` is set to false the user won't be able to dismiss the\n   * snackbar and the application must remove the snackbar after the process \n   * finish. Otherwise another snackbar won't appear.\n   * \n   * @default false\n   */\n  persistent?: boolean;\n\n  /**\n   * Whether the snackbar can be cancelled via user interaction.\n   * \n   * @default true\n   */\n  cancellable?: boolean;\n\n  /**\n   * The time in milliseconds after which the message is removed.\n   * Has not effect when `persistent` flag is set.\n   * \n   * @default 5000\n   */\n  timeout?: number;\n\n  /**\n   * The action to render next to the message.\n   * There can be only one action.\n   * It is only rendered when `actionCallback` is set.\n   */\n  actionLabel?: string;\n\n  /**\n   * The callback function called when the action was activated by the user.\n   */\n  actionCallback?: () => void;\n\n  /**\n   * Whether to render affordable \"close\" icon.\n   */\n  close?: boolean;\n\n  /**\n   * Callback called when the message was closed either by the user interaction\n   * or by a timeout.\n   * Note, it is not called when the message is closed programmatically.\n   */\n  closed?: () => void;\n}\n\ninterface INotificationInfo {\n  element: Snackbar;\n  init?: ISnackInit;\n}\n\n/**\n * A class that manages user notifications via snackbars (toast messages).\n */\nexport class SnackNotifications {\n  protected static current?: INotificationInfo;\n\n  protected static stack: INotificationInfo[] = [];\n\n  /**\n   * Notifies a user about something using default settings.\n   * @param message The message to show\n   * @param timeout Optionally the timeout after which the message will disappear.\n   */\n  static notify(message: string, timeout?: number): Snackbar;\n\n  /**\n   * Notifies the user about something with full configuration options available.\n   * @param message The message to show\n   * @param init Snack configuration options.\n   */\n  static notify(message: string, init: ISnackInit): Snackbar;\n\n  static notify(message: string, timeoutOrInit?: number | ISnackInit): Snackbar {\n    const snack = document.createElement('ui-snackbar');\n    snack.innerText = message;\n    let configInit: ISnackInit | undefined;\n\n    if (typeof timeoutOrInit === 'number') {\n      snack.timeout = timeoutOrInit;\n    } else if (timeoutOrInit) {\n      const cnf = timeoutOrInit as ISnackInit;\n      configInit = cnf;\n      if (typeof cnf.timeout === 'number') {\n        snack.timeout = cnf.timeout;\n      }\n      if (typeof cnf.persistent === 'boolean') {\n        snack.persistent = cnf.persistent;\n      }\n      if (typeof cnf.close === 'boolean') { \n        snack.close = cnf.close;\n      }\n      if (typeof cnf.cancellable === 'boolean') {\n        snack.cancellable = cnf.cancellable;\n      }\n      if (cnf.actionLabel && typeof cnf.actionCallback === 'function') {\n        snack.action = cnf.actionLabel;\n      }\n    }\n    this.stack.push({\n      element: snack,\n      init: configInit,\n    });\n    document.body.appendChild(snack);\n    snack.addEventListener('action', this.actionHandler.bind(this));\n    snack.addEventListener('open', this.openHandler.bind(this));\n    snack.addEventListener('dismiss', this.dismissHandler.bind(this));\n    setTimeout(() => {\n      this.schedule();\n    });\n    return snack;\n  }\n\n  protected static schedule(): void {\n    if (this.current) {\n      return;\n    }\n    const { stack = [] } = this;\n    const item = stack.shift();\n    if (!item) {\n      return;\n    }\n    this.current = item;\n    item.element.open = true;\n  }\n\n  protected static actionHandler(e: Event): void {\n    const target = e.target as Snackbar;\n    const info = SnackNotifications.current;\n    if (!info) {\n      return;\n    }\n    if (target !== info.element) {\n      return;\n    }\n    if (info.init && info.init.actionCallback) {\n      info.init.actionCallback();\n    }\n  }\n\n  protected static openHandler(e: Event): void {\n    const target = e.target as Snackbar;\n    if (target.open) {\n      return;\n    }\n    const info = SnackNotifications.current;\n    if (!info) {\n      return;\n    }\n    if (target !== info.element) {\n      return;\n    }\n    target.parentElement?.removeChild(target);\n    if (info.init && info.init.closed) {\n      info.init.closed();\n    }\n    SnackNotifications.current = undefined;\n    SnackNotifications.schedule();\n  }\n\n  protected static dismissHandler(e: Event): void {\n    const target = e.target as Snackbar;\n    const info = SnackNotifications.current;\n    if (!info) {\n      return;\n    }\n    if (target !== info.element) {\n      return;\n    }\n    target.parentElement?.removeChild(target);\n    SnackNotifications.current = undefined;\n    SnackNotifications.schedule();\n  }\n\n  static cancel(snack: Snackbar): void {\n    if (this.current?.element === snack) {\n      if (snack.open) {\n        // eslint-disable-next-line no-param-reassign\n        snack.open = false;\n      } else {\n        snack.parentElement?.removeChild(snack);\n        this.current = undefined;\n        SnackNotifications.schedule();\n      }\n    } else {\n      const index = this.stack.findIndex((i) => i.element === snack);\n      if (index >= 0) {\n        this.stack.splice(index, 1);\n      }\n    }\n  }\n}\n"]}

package/dist/ui/notification/Snackbar.js

@@ -31,59 +31,35 @@ import { classMap } from "lit/directives/class-map.js";
  * @fires action - When the action button was activated.
  */
 export class Snackbar extends LitElement {
-    /**
-     * When set the snackbar does not timeout.
-     * It has to be cancelled by user interaction or programmatically.
-     *
-     * When the `cancellable` is set to false the user won't be able to dismiss the
-     * snackbar and the application must remove the snackbar after the process
-     * finish. Otherwise another snackbar won't appear.
-     *
-     * @default false
-     * @attribute
-     */
-    persistent = false;
-    /**
-     * Whether the snackbar can be cancelled via user interaction.
-     *
-     * @default true
-     * @attribute
-     */
-    cancellable = true;
-    /**
-     * The time in milliseconds after which the message is removed.
-     * Has not effect when `persistent` flag is set.
-     *
-     * @default 5000
-     * @attribute
-     */
-    timeout = 5000;
-    /**
-     * The action to render next to the message.
-     * There can be only one action.
-     * It is only rendered when `actionCallback` is set.
-     *
-     * @attribute
-     */
-    action;
-    /**
-     * Whether to render affordable "close" icon.
-     *
-     * @attribute
-     */
-    close;
-    /**
-     * Whether the message is being rendered.
-     *
-     * @attribute
-     */
-    open;
-    dismissed;
-    timer;
-    touchXStart;
-    touchYStart;
     constructor() {
         super();
+        /**
+         * When set the snackbar does not timeout.
+         * It has to be cancelled by user interaction or programmatically.
+         *
+         * When the `cancellable` is set to false the user won't be able to dismiss the
+         * snackbar and the application must remove the snackbar after the process
+         * finish. Otherwise another snackbar won't appear.
+         *
+         * @default false
+         * @attribute
+         */
+        this.persistent = false;
+        /**
+         * Whether the snackbar can be cancelled via user interaction.
+         *
+         * @default true
+         * @attribute
+         */
+        this.cancellable = true;
+        /**
+         * The time in milliseconds after which the message is removed.
+         * Has not effect when `persistent` flag is set.
+         *
+         * @default 5000
+         * @attribute
+         */
+        this.timeout = 5000;
         this.addEventListener('touchstart', this.touchstartHandler.bind(this), { passive: true });
         this.addEventListener('touchend', this.touchendHandler.bind(this), { passive: true });
         this.addEventListener('transitionend', this.transitionendHandler.bind(this), { passive: true });

package/dist/ui/notification/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/ui/notification/Snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { EventUtils } from \"@api-client/core/build/browser.js\";\nimport '../../define/ui/ui-button.js';\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-icon.js';\nimport { classMap } from \"lit/directives/class-map.js\";\n\n/**\n * Snackbars provide brief messages about app processes at the bottom of the screen.\n * \n * Snackbars inform users of a process that an app has performed or will perform. \n * They appear temporarily, towards the bottom of the screen. \n * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.\n * \n * Only one snackbar may be displayed at a time.\n * \n * A snackbar can contain a single action. \"Dismiss\" or \"cancel\" actions are optional.\n * \n * Snackbars communicate messages that are minimally interruptive and don’t require user action.\n * \n * **Caution**, Do not use this element directly.\n * \n * A snackbar is the UI to render in the application. It does not care whether another \n * message is already rendered. Use `SnackNotifications` to manage notification system.\n * The `SnackNotifications` will position toasts directly under the `body` which will make \n * it easier to manage especially when relative / absolute positioning is used.\n * \n * @fires open - When the open state changes. Note, this event is not dispatched when it was programmatically closed.\n * @fires dismiss - When the message was closed via the API.\n * @fires action - When the action button was activated.\n */\nexport class Snackbar extends LitElement {\n  /**\n   * When set the snackbar does not timeout.\n   * It has to be cancelled by user interaction or programmatically.\n   * \n   * When the `cancellable` is set to false the user won't be able to dismiss the\n   * snackbar and the application must remove the snackbar after the process \n   * finish. Otherwise another snackbar won't appear.\n   * \n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean }) persistent = false;\n\n  /**\n   * Whether the snackbar can be cancelled via user interaction.\n   * \n   * @default true\n   * @attribute\n   */\n  @property({ type: Boolean }) cancellable = true;\n\n  /**\n   * The time in milliseconds after which the message is removed.\n   * Has not effect when `persistent` flag is set.\n   * \n   * @default 5000\n   * @attribute\n   */\n  @property({ type: Number }) timeout = 5000;\n\n  /**\n   * The action to render next to the message.\n   * There can be only one action.\n   * It is only rendered when `actionCallback` is set.\n   * \n   * @attribute\n   */\n  @property({ type: String }) action?: string;\n\n  /**\n   * Whether to render affordable \"close\" icon.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean }) close?: boolean;\n\n  /**\n   * Whether the message is being rendered.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) open?: boolean;\n\n  protected dismissed?: boolean;\n\n  protected timer?: number;\n\n  protected touchXStart?: number;\n\n  protected touchYStart?: number;\n\n  constructor() {\n    super();\n\n    this.addEventListener('touchstart', this.touchstartHandler.bind(this), { passive: true });\n    this.addEventListener('touchend', this.touchendHandler.bind(this), { passive: true });\n    this.addEventListener('transitionend', this.transitionendHandler.bind(this), { passive: true });\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      if (this.open) {\n        this.setupTimeout();\n      } else {\n        this.clearTimer();\n      }\n    }\n  }\n\n  /**\n   * Dismisses the snackbar\n   */\n  dismiss(): void {\n    this.dismissed = true;\n    this.open = false;\n  }\n\n  protected setupTimeout(): void {\n    const { timeout = 5000, persistent } = this;\n    this.clearTimer();\n    if (persistent) {\n      return;\n    }\n    this.timer = setTimeout(() => {\n      this.timeoutHandler();\n    }, timeout) as unknown as number;\n  }\n\n  protected clearTimer(): void {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = undefined;\n    }\n  }\n\n  protected timeoutHandler(): void {\n    this.open = false;\n  }\n\n  protected touchstartHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return;\n    }\n    this.touchXStart = e.changedTouches[0].screenX;\n    this.touchYStart = e.changedTouches[0].screenY;\n  }\n\n  protected touchendHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return;\n    }\n    const { touchXStart, touchYStart } = this;\n    if (typeof touchXStart !== 'number' || typeof touchYStart !== 'number') {\n      return;\n    }\n    this.touchXStart = undefined;\n    this.touchYStart = undefined;\n    const endX = e.changedTouches[0].screenX;\n    const endY = e.changedTouches[0].screenY;\n    const xDelta = Math.abs(endX - touchXStart);\n    const yDelta = Math.abs(endY - touchYStart);\n    const threshold = 20;\n    if (xDelta > threshold || yDelta > threshold) {\n      this.open = false;\n    }\n  }\n\n  protected actionHandler(): void {\n    this.dispatchEvent(new Event('action'));\n    this.dismiss();\n  }\n\n  protected transitionendHandler(): void {\n    if (!this.dismissed) {\n      this.dispatchEvent(new Event('open'));\n    } else {\n      this.dismissed = false;\n      this.dispatchEvent(new Event('dismiss'));\n    }\n  }\n\n  protected closeHandler(): void {\n    this.open = false;\n  }\n\n  protected override render(): TemplateResult {\n    const classes = {\n      body: true,\n      withAction: !!this.action,\n      withClose: !!this.close,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <slot></slot>\n    </div>\n    ${this.renderAction()}\n    ${this.renderIcon()}\n    `;\n  }\n\n  protected renderAction(): TemplateResult | typeof nothing {\n    const { action } = this;\n    if (!action) {\n      return nothing;\n    }\n    return html`\n    <ui-button type=\"text\" class=\"action\" @click=\"${this.actionHandler}\" @action=\"${EventUtils.cancelEvent}\">${action}</ui-button>\n    `;\n  }\n\n  protected renderIcon(): TemplateResult | typeof nothing {\n    const { close } = this;\n    if (!close) {\n      return nothing;\n    }\n    return html`\n    <ui-icon-button @click=\"${this.closeHandler}\" class=\"icon\" @action=\"${EventUtils.cancelEvent}\">\n      <ui-icon icon=\"close\"></ui-icon>\n    </ui-icon-button>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/ui/notification/Snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { EventUtils } from \"@api-client/core/build/browser.js\";\nimport '../../define/ui/ui-button.js';\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-icon.js';\nimport { classMap } from \"lit/directives/class-map.js\";\n\n/**\n * Snackbars provide brief messages about app processes at the bottom of the screen.\n * \n * Snackbars inform users of a process that an app has performed or will perform. \n * They appear temporarily, towards the bottom of the screen. \n * They shouldn’t interrupt the user experience, and they don’t require user input to disappear.\n * \n * Only one snackbar may be displayed at a time.\n * \n * A snackbar can contain a single action. \"Dismiss\" or \"cancel\" actions are optional.\n * \n * Snackbars communicate messages that are minimally interruptive and don’t require user action.\n * \n * **Caution**, Do not use this element directly.\n * \n * A snackbar is the UI to render in the application. It does not care whether another \n * message is already rendered. Use `SnackNotifications` to manage notification system.\n * The `SnackNotifications` will position toasts directly under the `body` which will make \n * it easier to manage especially when relative / absolute positioning is used.\n * \n * @fires open - When the open state changes. Note, this event is not dispatched when it was programmatically closed.\n * @fires dismiss - When the message was closed via the API.\n * @fires action - When the action button was activated.\n */\nexport class Snackbar extends LitElement {\n  /**\n   * When set the snackbar does not timeout.\n   * It has to be cancelled by user interaction or programmatically.\n   * \n   * When the `cancellable` is set to false the user won't be able to dismiss the\n   * snackbar and the application must remove the snackbar after the process \n   * finish. Otherwise another snackbar won't appear.\n   * \n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean }) persistent = false;\n\n  /**\n   * Whether the snackbar can be cancelled via user interaction.\n   * \n   * @default true\n   * @attribute\n   */\n  @property({ type: Boolean }) cancellable = true;\n\n  /**\n   * The time in milliseconds after which the message is removed.\n   * Has not effect when `persistent` flag is set.\n   * \n   * @default 5000\n   * @attribute\n   */\n  @property({ type: Number }) timeout = 5000;\n\n  /**\n   * The action to render next to the message.\n   * There can be only one action.\n   * It is only rendered when `actionCallback` is set.\n   * \n   * @attribute\n   */\n  @property({ type: String }) action?: string;\n\n  /**\n   * Whether to render affordable \"close\" icon.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean }) close?: boolean;\n\n  /**\n   * Whether the message is being rendered.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) open?: boolean;\n\n  protected dismissed?: boolean;\n\n  protected timer?: number;\n\n  protected touchXStart?: number;\n\n  protected touchYStart?: number;\n\n  constructor() {\n    super();\n\n    this.addEventListener('touchstart', this.touchstartHandler.bind(this), { passive: true });\n    this.addEventListener('touchend', this.touchendHandler.bind(this), { passive: true });\n    this.addEventListener('transitionend', this.transitionendHandler.bind(this), { passive: true });\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      if (this.open) {\n        this.setupTimeout();\n      } else {\n        this.clearTimer();\n      }\n    }\n  }\n\n  /**\n   * Dismisses the snackbar\n   */\n  dismiss(): void {\n    this.dismissed = true;\n    this.open = false;\n  }\n\n  protected setupTimeout(): void {\n    const { timeout = 5000, persistent } = this;\n    this.clearTimer();\n    if (persistent) {\n      return;\n    }\n    this.timer = setTimeout(() => {\n      this.timeoutHandler();\n    }, timeout) as unknown as number;\n  }\n\n  protected clearTimer(): void {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = undefined;\n    }\n  }\n\n  protected timeoutHandler(): void {\n    this.open = false;\n  }\n\n  protected touchstartHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return;\n    }\n    this.touchXStart = e.changedTouches[0].screenX;\n    this.touchYStart = e.changedTouches[0].screenY;\n  }\n\n  protected touchendHandler(e: TouchEvent): void {\n    if (this.cancellable === false) {\n      return;\n    }\n    const { touchXStart, touchYStart } = this;\n    if (typeof touchXStart !== 'number' || typeof touchYStart !== 'number') {\n      return;\n    }\n    this.touchXStart = undefined;\n    this.touchYStart = undefined;\n    const endX = e.changedTouches[0].screenX;\n    const endY = e.changedTouches[0].screenY;\n    const xDelta = Math.abs(endX - touchXStart);\n    const yDelta = Math.abs(endY - touchYStart);\n    const threshold = 20;\n    if (xDelta > threshold || yDelta > threshold) {\n      this.open = false;\n    }\n  }\n\n  protected actionHandler(): void {\n    this.dispatchEvent(new Event('action'));\n    this.dismiss();\n  }\n\n  protected transitionendHandler(): void {\n    if (!this.dismissed) {\n      this.dispatchEvent(new Event('open'));\n    } else {\n      this.dismissed = false;\n      this.dispatchEvent(new Event('dismiss'));\n    }\n  }\n\n  protected closeHandler(): void {\n    this.open = false;\n  }\n\n  protected override render(): TemplateResult {\n    const classes = {\n      body: true,\n      withAction: !!this.action,\n      withClose: !!this.close,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\">\n      <slot></slot>\n    </div>\n    ${this.renderAction()}\n    ${this.renderIcon()}\n    `;\n  }\n\n  protected renderAction(): TemplateResult | typeof nothing {\n    const { action } = this;\n    if (!action) {\n      return nothing;\n    }\n    return html`\n    <ui-button type=\"text\" class=\"action\" @click=\"${this.actionHandler}\" @action=\"${EventUtils.cancelEvent}\">${action}</ui-button>\n    `;\n  }\n\n  protected renderIcon(): TemplateResult | typeof nothing {\n    const { close } = this;\n    if (!close) {\n      return nothing;\n    }\n    return html`\n    <ui-icon-button @click=\"${this.closeHandler}\" class=\"icon\" @action=\"${EventUtils.cancelEvent}\">\n      <ui-icon icon=\"close\"></ui-icon>\n    </ui-icon-button>\n    `;\n  }\n}\n"]}