@api-client/ui 0.0.4 → 0.0.5

package/dist/store/UserCache.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCache.js","sourceRoot":"","sources":["../../src/store/UserCache.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAmB,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAElF;;;GAGG;AACH,MAAM,SAAS;IACH,MAAM,GAAG,IAAI,GAAG,EAA6B,CAAC;IAExD;;OAEG;IACO,eAAe,GAAG,IAAI,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAEzE;QACE,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACzF,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,GAAW;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAES,KAAK,CAAC,WAAW,CAAC,GAAW;QACrC,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjD,OAAO,MAAM,CAAC;SACf;QAAC,OAAO,CAAC,EAAE;YACV,OAAO;SACR;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAES,qBAAqB,CAAC,CAAe;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,IAAuB,CAAC;QACxC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QACvB,IAAI,IAAI,KAAK,wBAAwB,EAAE;YACrC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;SACzB;aAAM,IAAI,IAAI,KAAK,iBAAiB,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAgC,CAAC;YACpD,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;aACzB;SACF;IACH,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;AACjC,eAAe,QAAQ,CAAC","sourcesContent":["import { IUser } from \"@api-client/core/build/browser.js\";\nimport { AddConfigEnvironmentInit } from \"../bindings/base/ConfigurationBindings.js\";\nimport { Events } from \"../events/Events.js\";\nimport { ConfigBroadcast, ConfigBroadcastChannel } from \"../lib/config/Config.js\";\n\n/**\n * A class that caches user info in memory so the application reduces the number\n * of requests to the backend requesting a user info.\n */\nclass UserCache {\n  protected cached = new Map<string, IUser | undefined>();\n\n  /**\n   * Application configuration broadcast channel.\n   */\n  protected configBroadcast = new BroadcastChannel(ConfigBroadcastChannel);\n\n  constructor() {\n    this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this))\n  }\n\n  async getUser(key: string): Promise<IUser | undefined> {\n    const existing = this.cached.get(key);\n    if (existing) {\n      return existing;\n    }\n    const read = await this.requestUser(key);\n    this.cached.set(key, read);\n    return read;\n  }\n\n  protected async requestUser(key: string): Promise<IUser | undefined> {\n    try {\n      const result = await Events.Store.User.read(key);\n      return result;\n    } catch (e) {\n      // ....\n    }\n    return undefined;\n  }\n\n  protected handleConfigBroadcast(e: MessageEvent): void {\n    const event = e.data as ConfigBroadcast;\n    const { path } = event;\n    if (path === 'environment.setDefault') {\n      this.cached = new Map();\n    } else if (path === 'environment.add') {\n      const init = event.init as AddConfigEnvironmentInit;\n      if (init.asDefault) {\n        this.cached = new Map();\n      }\n    }\n  }\n}\n\nconst instance = new UserCache();\nexport default instance;\n"]}
+{"version":3,"file":"UserCache.js","sourceRoot":"","sources":["../../src/store/UserCache.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAmB,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAElF;;;GAGG;AACH,MAAM,SAAS;IAQb;QAPU,WAAM,GAAG,IAAI,GAAG,EAA6B,CAAC;QAExD;;WAEG;QACO,oBAAe,GAAG,IAAI,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;QAGvE,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACzF,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,GAAW;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAES,KAAK,CAAC,WAAW,CAAC,GAAW;QACrC,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjD,OAAO,MAAM,CAAC;SACf;QAAC,OAAO,CAAC,EAAE;YACV,OAAO;SACR;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAES,qBAAqB,CAAC,CAAe;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,IAAuB,CAAC;QACxC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QACvB,IAAI,IAAI,KAAK,wBAAwB,EAAE;YACrC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;SACzB;aAAM,IAAI,IAAI,KAAK,iBAAiB,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAgC,CAAC;YACpD,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;aACzB;SACF;IACH,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;AACjC,eAAe,QAAQ,CAAC","sourcesContent":["import { IUser } from \"@api-client/core/build/browser.js\";\nimport { AddConfigEnvironmentInit } from \"../bindings/base/ConfigurationBindings.js\";\nimport { Events } from \"../events/Events.js\";\nimport { ConfigBroadcast, ConfigBroadcastChannel } from \"../lib/config/Config.js\";\n\n/**\n * A class that caches user info in memory so the application reduces the number\n * of requests to the backend requesting a user info.\n */\nclass UserCache {\n  protected cached = new Map<string, IUser | undefined>();\n\n  /**\n   * Application configuration broadcast channel.\n   */\n  protected configBroadcast = new BroadcastChannel(ConfigBroadcastChannel);\n\n  constructor() {\n    this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this))\n  }\n\n  async getUser(key: string): Promise<IUser | undefined> {\n    const existing = this.cached.get(key);\n    if (existing) {\n      return existing;\n    }\n    const read = await this.requestUser(key);\n    this.cached.set(key, read);\n    return read;\n  }\n\n  protected async requestUser(key: string): Promise<IUser | undefined> {\n    try {\n      const result = await Events.Store.User.read(key);\n      return result;\n    } catch (e) {\n      // ....\n    }\n    return undefined;\n  }\n\n  protected handleConfigBroadcast(e: MessageEvent): void {\n    const event = e.data as ConfigBroadcast;\n    const { path } = event;\n    if (path === 'environment.setDefault') {\n      this.cached = new Map();\n    } else if (path === 'environment.add') {\n      const init = event.init as AddConfigEnvironmentInit;\n      if (init.asDefault) {\n        this.cached = new Map();\n      }\n    }\n  }\n}\n\nconst instance = new UserCache();\nexport default instance;\n"]}

package/dist/ui/UiElement.js

@@ -15,11 +15,10 @@ import { ActionController } from "./controllers/ActionController.js";
  * @fires action - An event dispatched when the UI element was activated (pointer, keyboard).
  */
 export class UiElement extends LitElement {
-    actionController = new ActionController(this);
-    /**
-     * Indicates the component is in the pressed state.
-     */
-    pressed;
+    constructor() {
+        super(...arguments);
+        this.actionController = new ActionController(this);
+    }
     /**
      * Hook method called when we've confirmed that the gesture is intended to be
      * a press. Subclasses should change the visual state of the control to

package/dist/ui/UiElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiElement.js","sourceRoot":"","sources":["../../src/ui/UiElement.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD;;;;GAIG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAA0D,MAAM,mCAAmC,CAAC;AAE7H;;;;;GAKG;AACH,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAOtC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAExD;;OAEG;IACgB,OAAO,CAAW;IAErC;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAyB;QAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAkB;QAChD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,MAAM,EAAE,UAAU;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAED;;;;OAIG;IACH,iBAAiB,CAAC,CAAe;QAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,CAAe;QACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAa;QACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAgB;QAC1B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;CACF;AAzGU;IAAR,KAAK,EAAE;0CAA6B","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { LitElement } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig } from \"./controllers/ActionController.js\";\n\n/**\n * The base class for all API Client's base UI elements.\n * Only contains logic to be applied to **all** UI elements.\n * \n * @fires action - An event dispatched when the UI element was activated (pointer, keyboard).\n */\nexport abstract class UiElement extends LitElement implements ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean;\n\n  protected actionController = new ActionController(this);\n\n  /**\n   * Indicates the component is in the pressed state.\n   */\n  @state() protected pressed?: boolean;\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig): void { \n    this.pressed = true;\n  }\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({ cancelled, actionData }: EndPressConfig): void {\n    this.pressed = false;\n    if (!cancelled) {\n      this.dispatchEvent(new CustomEvent('action', {\n        detail: actionData,\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent): void {\n    this.actionController.pointerDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent): void {\n    this.actionController.pointerUp(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent): void {\n    this.actionController.pointerCancel(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent): void {\n    this.actionController.pointerLeave(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent): void {\n    this.actionController.click(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu(): void {\n    this.actionController.contextMenu();\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keydown=\"${this.handleKeyDown}\"`\n   */\n  handleKeyDown(e: KeyboardEvent): void {\n    this.actionController.keyDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keyup=\"${this.handleKeyUp}\"`\n   */\n  handleKeyUp(e: KeyboardEvent): void {\n    this.actionController.keyUp(e);\n  }\n}\n"]}
+{"version":3,"file":"UiElement.js","sourceRoot":"","sources":["../../src/ui/UiElement.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD;;;;GAIG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAA0D,MAAM,mCAAmC,CAAC;AAE7H;;;;;GAKG;AACH,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAAlD;;QAOY,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IA8G1D,CAAC;IAvGC;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAyB;QAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAkB;QAChD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,MAAM,EAAE,UAAU;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAED;;;;OAIG;IACH,iBAAiB,CAAC,CAAe;QAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,CAAe;QACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAa;QACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAgB;QAC1B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;CACF;AAzGU;IAAR,KAAK,EAAE;0CAA6B","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { LitElement } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig } from \"./controllers/ActionController.js\";\n\n/**\n * The base class for all API Client's base UI elements.\n * Only contains logic to be applied to **all** UI elements.\n * \n * @fires action - An event dispatched when the UI element was activated (pointer, keyboard).\n */\nexport abstract class UiElement extends LitElement implements ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean;\n\n  protected actionController = new ActionController(this);\n\n  /**\n   * Indicates the component is in the pressed state.\n   */\n  @state() protected pressed?: boolean;\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig): void { \n    this.pressed = true;\n  }\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({ cancelled, actionData }: EndPressConfig): void {\n    this.pressed = false;\n    if (!cancelled) {\n      this.dispatchEvent(new CustomEvent('action', {\n        detail: actionData,\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent): void {\n    this.actionController.pointerDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent): void {\n    this.actionController.pointerUp(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent): void {\n    this.actionController.pointerCancel(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent): void {\n    this.actionController.pointerLeave(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent): void {\n    this.actionController.click(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu(): void {\n    this.actionController.contextMenu();\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keydown=\"${this.handleKeyDown}\"`\n   */\n  handleKeyDown(e: KeyboardEvent): void {\n    this.actionController.keyDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@keyup=\"${this.handleKeyUp}\"`\n   */\n  handleKeyUp(e: KeyboardEvent): void {\n    this.actionController.keyUp(e);\n  }\n}\n"]}

package/dist/ui/button/SegmentedButton.js

@@ -12,15 +12,17 @@ import { check } from "../icons/Icons.js";
  * @slot icon - A slot to render an icon.
  */
 export default class SegmentedButton extends Button {
-    ripple;
-    /**
-     * Whether the button is selected.
-     * @attribute
-     */
-    selected = false;
-    leadingIcons;
     constructor() {
         super();
+        /**
+         * Whether the button is selected.
+         * @attribute
+         */
+        this.selected = false;
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
     }
     beginPress(options) {
@@ -92,10 +94,6 @@ export default class SegmentedButton extends Button {
         });
         return html `<span class="${iconClasses}" role="presentation">${check}</span>`;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     query('ui-ripple')

package/dist/ui/button/SegmentedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButton.js","sourceRoot":"","sources":["../../../src/ui/button/SegmentedButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { Button } from \"./Button.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\nimport { check } from \"../icons/Icons.js\";\n\n/**\n * @fires trigger - When a button is triggered.\n * @slot - Default slot for the label\n * @slot icon - A slot to render an icon.\n */\nexport default class SegmentedButton extends Button {\n  @query('ui-ripple') ripple!: UiRipple;\n\n  /**\n   * Whether the button is selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) selected = false;\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected leadingIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(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    if (!options.cancelled) {\n      this.dispatchEvent(new Event('trigger', { bubbles: true, composed: true }));\n    }\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    this.ripple.endHover();\n  }\n\n  protected handleIconSlotChange(): void {\n    this.requestUpdate();\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, selected = false } = this;\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n      selected,\n    });\n\n    return html`\n    <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n      ${this.renderRipple()}\n      <div class=\"content\">\n        ${this.leadingContent()}  \n        <slot></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  protected leadingContent(): TemplateResult {\n    const { leadingIcons } = this;\n    const classes: ClassInfo = {\n      'leading': true,\n      visible: !!this.selected || !!leadingIcons.length,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeadingIcon()}\n      ${this.renderChecked()}\n    </div>\n    `;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    const { leadingIcons } = this;\n    const classes: ClassInfo = {\n      'leading-icon': true,\n      'with-icon': !!leadingIcons.length,\n      hidden: !!this.selected,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\"><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderChecked(): TemplateResult {\n    const iconClasses = classMap({\n      'check-mark': true,\n      checked: !!this.selected,\n    });\n    return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"SegmentedButton.js","sourceRoot":"","sources":["../../../src/ui/button/SegmentedButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { Button } from \"./Button.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\nimport { check } from \"../icons/Icons.js\";\n\n/**\n * @fires trigger - When a button is triggered.\n * @slot - Default slot for the label\n * @slot icon - A slot to render an icon.\n */\nexport default class SegmentedButton extends Button {\n  @query('ui-ripple') ripple!: UiRipple;\n\n  /**\n   * Whether the button is selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) selected = false;\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected leadingIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(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    if (!options.cancelled) {\n      this.dispatchEvent(new Event('trigger', { bubbles: true, composed: true }));\n    }\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    this.ripple.endHover();\n  }\n\n  protected handleIconSlotChange(): void {\n    this.requestUpdate();\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, selected = false } = this;\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n      selected,\n    });\n\n    return html`\n    <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n      ${this.renderRipple()}\n      <div class=\"content\">\n        ${this.leadingContent()}  \n        <slot></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  protected leadingContent(): TemplateResult {\n    const { leadingIcons } = this;\n    const classes: ClassInfo = {\n      'leading': true,\n      visible: !!this.selected || !!leadingIcons.length,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\">\n      ${this.renderLeadingIcon()}\n      ${this.renderChecked()}\n    </div>\n    `;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    const { leadingIcons } = this;\n    const classes: ClassInfo = {\n      'leading-icon': true,\n      'with-icon': !!leadingIcons.length,\n      hidden: !!this.selected,\n    }\n    return html`\n    <div class=\"${classMap(classes)}\"><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderChecked(): TemplateResult {\n    const iconClasses = classMap({\n      'check-mark': true,\n      checked: !!this.selected,\n    });\n    return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/button/SegmentedButtonsSet.js

@@ -6,15 +6,14 @@ import { UiElement } from "../UiElement.js";
  * @fires select - When button's selection change.
  */
 export default class SegmentedButtonsSet extends UiElement {
-    disabled = false;
-    /**
-     * Whether multiple buttons can be selected at once.
-     * @attribute
-     */
-    multiselect = false;
-    buttons;
     constructor() {
         super();
+        this.disabled = false;
+        /**
+         * Whether multiple buttons can be selected at once.
+         * @attribute
+         */
+        this.multiselect = false;
         this.addEventListener('trigger', this.handleButtonTrigger.bind(this));
     }
     connectedCallback() {

package/dist/ui/button/SegmentedButtonsSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButtonsSet.js","sourceRoot":"","sources":["../../../src/ui/button/SegmentedButtonsSet.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport SegmentedButton from \"./SegmentedButton.js\";\n\n/**\n * @fires select - When button's selection change.\n */\nexport default class SegmentedButtonsSet extends UiElement {\n  disabled = false;\n\n  /**\n   * Whether multiple buttons can be selected at once.\n   * @attribute\n   */\n  @property({ type: Boolean }) multiselect = false;\n\n  @queryAssignedElements({ flatten: true }) buttons!: SegmentedButton[];\n\n  constructor() {\n    super();\n    this.addEventListener('trigger', this.handleButtonTrigger.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n  }\n\n  isButtonDisabled(index: number): boolean {\n    if (this.isOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean): void {\n    if (this.isOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  isButtonSelected(index: number): boolean {\n    if (this.isOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean): void {\n    // Ignore out-of-index values.\n    if (this.isOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.isButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.dispatchSelected(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.dispatchSelected(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleButtonTrigger(e: Event): void {\n    const index = this.buttons.indexOf(e.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number): void {\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private isOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private dispatchSelected(index: number): void {\n    this.dispatchEvent(new CustomEvent('select', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"SegmentedButtonsSet.js","sourceRoot":"","sources":["../../../src/ui/button/SegmentedButtonsSet.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport SegmentedButton from \"./SegmentedButton.js\";\n\n/**\n * @fires select - When button's selection change.\n */\nexport default class SegmentedButtonsSet extends UiElement {\n  disabled = false;\n\n  /**\n   * Whether multiple buttons can be selected at once.\n   * @attribute\n   */\n  @property({ type: Boolean }) multiselect = false;\n\n  @queryAssignedElements({ flatten: true }) buttons!: SegmentedButton[];\n\n  constructor() {\n    super();\n    this.addEventListener('trigger', this.handleButtonTrigger.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n  }\n\n  isButtonDisabled(index: number): boolean {\n    if (this.isOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean): void {\n    if (this.isOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  isButtonSelected(index: number): boolean {\n    if (this.isOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean): void {\n    // Ignore out-of-index values.\n    if (this.isOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.isButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.dispatchSelected(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.dispatchSelected(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleButtonTrigger(e: Event): void {\n    const index = this.buttons.indexOf(e.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number): void {\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private isOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private dispatchSelected(index: number): void {\n    this.dispatchEvent(new CustomEvent('select', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/dist/ui/button/UiButton.js

@@ -29,27 +29,10 @@ export default class UiButton extends Button {
     static get formAssociated() {
         return true;
     }
-    #_internals = this.attachInternals();
+    #_internals;
     get form() {
         return this.#_internals && this.#_internals.form;
     }
-    /**
-     * The type of the rendered button according to Material 3 spec.
-     *
-     * @default {ButtonType.filled}
-     * @attribute
-     */
-    type;
-    /**
-     * Determines when the element has an icon in the "icon" slot.
-     */
-    _hasIcon;
-    /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data,
-     * when that button is used to submit the form.
-     * @attribute
-     */
-    name;
     #_value;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data.
@@ -66,25 +49,24 @@ export default class UiButton extends Button {
         this.#_value = value;
         this.#_internals?.setFormValue(value || null);
     }
-    /**
-     * Whether to render the icon at the inline end of the label rather than the
-     * inline start.
-     * @attribute
-     */
-    trailingIcon = false;
-    ripple;
-    showRipple = false;
-    /**
-     * Whether the button is a submit button for a form.
-     * @attribute
-     */
-    submit;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     constructor() {
         super();
+        this.#_internals = this.attachInternals();
+        /**
+         * Whether to render the icon at the inline end of the label rather than the
+         * inline start.
+         * @attribute
+         */
+        this.trailingIcon = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.type = ButtonType.filled;
         this._hasIcon = false;
     }
@@ -174,10 +156,6 @@ export default class UiButton extends Button {
     _iconTemplate() {
         return html `<slot name="icon" @slotchange="${this._iconSlotChange}"></slot>`;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     property({ type: String, reflect: true, })

package/dist/ui/button/UiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport UiRipple from \"../effects/ripple.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the button rendered.\n */\nexport enum ButtonType {\n  'elevated' = 'elevated',\n  'filled' = 'filled',\n  'tonal' = 'tonal',\n  'outlined' = 'outlined',\n  'text' = 'text',\n}\n\n/**\n * A material design button.\n * \n * Note, this control is form associated.\n * \n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class UiButton extends Button {\n  static get formAssociated(): boolean {\n    return true;\n  }\n\n  #_internals = this.attachInternals();\n\n  get form(): HTMLFormElement | null {\n    return this.#_internals && this.#_internals.form;\n  }\n\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: ButtonType;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected _hasIcon: boolean;\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data, \n   * when that button is used to submit the form.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string;\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data. \n   * This value is passed to the server in params when the form is submitted using this button.\n   * @attribute\n   */\n  @property({ type: String })\n  get value(): string | undefined {\n    return this.#_value;\n  }\n\n  set value(value: string | undefined) {\n    if (this.#_value === value) {\n      return;\n    }\n    this.#_value = value;\n    this.#_internals?.setFormValue(value || null);\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) trailingIcon = false;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Whether the button is a submit button for a form.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) submit?: boolean;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = ButtonType.filled;\n    this._hasIcon = false;\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      this._submitHandler();\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  protected _submitHandler(): void {\n    const { form, name, value, submit, disabled } = this;\n    if (!form || !submit || disabled) {\n      return;\n    }\n    let button: HTMLButtonElement | undefined;\n    if (name || value) {\n      button = document.createElement('button');\n      if (name) {\n        button.name = name;\n      }\n      if (value) {\n        button.value = value;\n      }\n      button.type = 'submit';\n      button.hidden = true;\n      form.append(button);\n    }\n    try {\n      form.requestSubmit(button);\n    } catch (_) {\n      // ...\n    }\n    if (button) {\n      form.removeChild(button);\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected _iconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIcon = !!slot.assignedNodes().length;\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, trailingIcon = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this._hasIcon,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${trailingIcon ? '' : this._iconTemplate()}\n        <slot></slot>\n        ${trailingIcon ? this._iconTemplate() : ''}\n      </div>\n    </div>\n    `;\n  }\n\n  protected _iconTemplate(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${this._iconSlotChange}\"></slot>`;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport UiRipple from \"../effects/ripple.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the button rendered.\n */\nexport enum ButtonType {\n  'elevated' = 'elevated',\n  'filled' = 'filled',\n  'tonal' = 'tonal',\n  'outlined' = 'outlined',\n  'text' = 'text',\n}\n\n/**\n * A material design button.\n * \n * Note, this control is form associated.\n * \n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class UiButton extends Button {\n  static get formAssociated(): boolean {\n    return true;\n  }\n\n  #_internals = this.attachInternals();\n\n  get form(): HTMLFormElement | null {\n    return this.#_internals && this.#_internals.form;\n  }\n\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: ButtonType;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected _hasIcon: boolean;\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data, \n   * when that button is used to submit the form.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string;\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data. \n   * This value is passed to the server in params when the form is submitted using this button.\n   * @attribute\n   */\n  @property({ type: String })\n  get value(): string | undefined {\n    return this.#_value;\n  }\n\n  set value(value: string | undefined) {\n    if (this.#_value === value) {\n      return;\n    }\n    this.#_value = value;\n    this.#_internals?.setFormValue(value || null);\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) trailingIcon = false;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Whether the button is a submit button for a form.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) submit?: boolean;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = ButtonType.filled;\n    this._hasIcon = false;\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      this._submitHandler();\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  protected _submitHandler(): void {\n    const { form, name, value, submit, disabled } = this;\n    if (!form || !submit || disabled) {\n      return;\n    }\n    let button: HTMLButtonElement | undefined;\n    if (name || value) {\n      button = document.createElement('button');\n      if (name) {\n        button.name = name;\n      }\n      if (value) {\n        button.value = value;\n      }\n      button.type = 'submit';\n      button.hidden = true;\n      form.append(button);\n    }\n    try {\n      form.requestSubmit(button);\n    } catch (_) {\n      // ...\n    }\n    if (button) {\n      form.removeChild(button);\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected _iconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIcon = !!slot.assignedNodes().length;\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, trailingIcon = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this._hasIcon,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${trailingIcon ? '' : this._iconTemplate()}\n        <slot></slot>\n        ${trailingIcon ? this._iconTemplate() : ''}\n      </div>\n    </div>\n    `;\n  }\n\n  protected _iconTemplate(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${this._iconSlotChange}\"></slot>`;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/button/UiIconButton.js

@@ -20,39 +20,17 @@ export var IconButtonType;
  * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
  */
 export default class UiIconButton extends Button {
-    /**
-     * The type of the rendered button according to Material 3 spec.
-     *
-     * @default {ButtonType.filled}
-     * @attribute
-     */
-    type;
-    /**
-     * Whether the button can be toggled.
-     * A toggle button behaves different as it gets the `aria-pressed` attribute
-     * which changes depending on the pressed state.
-     * A toggle button is activated until it is clicked/pressed again.
-     * A toggle button dispatched `active` event when the press state change.
-     * The host can check the `active` property to know the state.
-     *
-     * @attribute
-     */
-    toggle;
-    /**
-     * A flag that determines whether the button is activated (pressed when `toggle` is set).
-     * It is `undefined` and makes no effect when `toggle` is not set.
-     *
-     * @attribute
-     */
-    active;
-    ripple;
-    showRipple = false;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     constructor() {
         super();
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.type = IconButtonType.standard;
     }
     update(changedProperties) {
@@ -112,10 +90,6 @@ export default class UiIconButton extends Button {
     </div>
     `;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     property({ type: String, reflect: true, })

package/dist/ui/button/UiIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiIconButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiIconButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the icon button rendered.\n */\nexport enum IconButtonType {\n  'filled' = 'filled', \n  'tonal' = 'tonal', \n  'outlined' = 'outlined', \n  'standard' = 'standard',\n}\n\n/**\n * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.\n */\nexport default class UiIconButton extends Button {\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: IconButtonType;\n\n  /**\n   * Whether the button can be toggled.\n   * A toggle button behaves different as it gets the `aria-pressed` attribute \n   * which changes depending on the pressed state.\n   * A toggle button is activated until it is clicked/pressed again.\n   * A toggle button dispatched `active` event when the press state change. \n   * The host can check the `active` property to know the state.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) toggle?: boolean;\n\n  /**\n   * A flag that determines whether the button is activated (pressed when `toggle` is set).\n   * It is `undefined` and makes no effect when `toggle` is not set.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) active?: boolean;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = IconButtonType.standard;\n  }\n\n  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-pressed', String(this.active));\n    }\n    super.update(changedProperties);\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      if (this.toggle) {\n        this.active = !this.active;\n        // note, only dispatch events when user interacting with the UI.\n        this.dispatchEvent(new Event('active'));\n      }\n    }\n    if (reason === 'enter' || reason === 'space') {\n      if (!this.toggle) {\n        this.click();\n      }\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        <slot></slot>\n      </div>\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"]}
+{"version":3,"file":"UiIconButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,8BAA8B,CAAC;AAEtC;;GAEG;AACH,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,mCAAmB,CAAA;IACnB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;IACvB,uCAAuB,CAAA;AACzB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,MAAM;IAsC9C;QACE,KAAK,EAAE,CAAC;QARS,eAAU,GAAG,KAAK,CAAC;QAEnB,cAAS,GAAG,GAA6B,EAAE;YAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;QAuEQ,iBAAY,GAAG,GAAmB,EAAE;YAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,OAAO,IAAI,CAAA,wCAAwC,QAAQ,gBAAgB,CAAC;QAC9E,CAAC,CAAC;QArEA,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC,QAAQ,CAAC;IACtC,CAAC;IAEkB,MAAM,CAAC,iBAAuC;QAC/D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;SACxD;QACD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAClC,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;YACjC,OAAO,CAAC,UAAU,EAAE,CAAC;SACtB;IACH,CAAC;IAES,KAAK,CAAC,SAAS;QACvB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;IACtB,CAAC;IAEQ,UAAU,CAAC,OAAyB;QAC3C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,QAAQ,CAAC,MAAsB;QACtC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACvB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QACrC,IAAI,SAAS,EAAE;YACb,OAAO;SACR;QACD,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE;YACvD,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC3B,gEAAgE;gBAChE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;aACzC;SACF;QACD,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBAChB,IAAI,CAAC,KAAK,EAAE,CAAC;aACd;SACF;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,OAAO,GAAC,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/B,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,OAAO,EAAE,IAAI;YACb,OAAO;SACR,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;kBACG,gBAAgB,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;;QAGrD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;;;;;KAK3C,CAAC;IACJ,CAAC;CAMF;AAxG6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC;0CAAsB;AAYpB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC;4CAAkB;AAQjB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC;4CAAkB;AAErC;IAAxB,UAAU,CAAC,WAAW,CAAC;4CAA6C;AAE5D;IAAR,KAAK,EAAE;gDAA8B","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the icon button rendered.\n */\nexport enum IconButtonType {\n  'filled' = 'filled', \n  'tonal' = 'tonal', \n  'outlined' = 'outlined', \n  'standard' = 'standard',\n}\n\n/**\n * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.\n */\nexport default class UiIconButton extends Button {\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: IconButtonType;\n\n  /**\n   * Whether the button can be toggled.\n   * A toggle button behaves different as it gets the `aria-pressed` attribute \n   * which changes depending on the pressed state.\n   * A toggle button is activated until it is clicked/pressed again.\n   * A toggle button dispatched `active` event when the press state change. \n   * The host can check the `active` property to know the state.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) toggle?: boolean;\n\n  /**\n   * A flag that determines whether the button is activated (pressed when `toggle` is set).\n   * It is `undefined` and makes no effect when `toggle` is not set.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) active?: boolean;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = IconButtonType.standard;\n  }\n\n  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-pressed', String(this.active));\n    }\n    super.update(changedProperties);\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      if (this.toggle) {\n        this.active = !this.active;\n        // note, only dispatch events when user interacting with the UI.\n        this.dispatchEvent(new Event('active'));\n      }\n    }\n    if (reason === 'enter' || reason === 'space') {\n      if (!this.toggle) {\n        this.click();\n      }\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        <slot></slot>\n      </div>\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"]}

package/dist/ui/chip/UiChip.js

@@ -35,49 +35,17 @@ export default class UiChip extends UiElement {
         setDisabled(this, value);
         this.requestUpdate('disabled', old);
     }
-    /**
-     * The type of the rendered chip.
-     * @attribute
-     *
-     * @see https://m3.material.io/components/chips/guidelines
-     */
-    type;
-    /**
-     * Whether the chip should be rendered as elevated.
-     * @attribute
-     */
-    elevated;
-    /**
-     * Whether the chip renders the "close" icon at the end.
-     * @attribute
-     */
-    closable;
-    /**
-     * Whether the chip is currently checked.
-     * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.
-     * @attribute
-     */
-    checked;
-    /**
-     * The ID attribute of the list element that is rendered after activating the chip.
-     * When this is set the chip renders the dropdown icon at the end and sets `aria-*`
-     * attributes informing the assistive technology that this chip controls a list.
-     *
-     * @attribute
-     */
-    list;
-    ripple;
-    showRipple = false;
-    /**
-     * Determines when the element has an icon in the "icon" slot.
-     */
-    hasIcon;
-    /**
-     * Determines when the element has an image in the "avatar" slot.
-     */
-    hasAvatar;
     constructor() {
         super();
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.disabled = false;
         this.type = ChipType.assist;
         this.hasIcon = false;
@@ -136,10 +104,6 @@ export default class UiChip extends UiElement {
         const element = await this.getRipple();
         element?.endFocus();
     }
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     endPress(info) {
         super.endPress(info);
         this.endRipple();
@@ -255,10 +219,6 @@ export default class UiChip extends UiElement {
         }
         return nothing;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/ui/chip/UiChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiChip.js","sourceRoot":"","sources":["../../../src/ui/chip/UiChip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { EventUtils } from \"@api-client/core/build/browser.js\"; // build/src/lib/events/Utils.js\nimport { UiElement } from \"../UiElement.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport { close, arrowDropDown, check } from \"../icons/Icons.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport enum ChipType {\n  assist = 'assist',\n  filter = 'filter',\n  input = 'input',\n  suggestion = 'suggestion',\n}\n\n/**\n * @slot icon - The leading icon, sized 18x18 px\n * @slot avatar - The leading image, sized 24x24 px\n * @fires list - When the user requested to activate the list associated with the element.\n * @fires select - When the checked state changed through a user interaction. This only related to `filter` chips. Note, `select` is dispatched just before the `click` event.\n */\nexport default class UiChip extends UiElement {\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 type of the rendered chip.\n   * @attribute\n   * \n   * @see https://m3.material.io/components/chips/guidelines\n   */\n  @property({ type: String }) type: ChipType;\n\n  /**\n   * Whether the chip should be rendered as elevated.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) elevated?: boolean;\n\n  /**\n   * Whether the chip renders the \"close\" icon at the end.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) closable?: boolean;\n\n  /**\n   * Whether the chip is currently checked.\n   * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) checked?: boolean;\n\n  /**\n   * The ID attribute of the list element that is rendered after activating the chip.\n   * When this is set the chip renders the dropdown icon at the end and sets `aria-*` \n   * attributes informing the assistive technology that this chip controls a list.\n   * \n   * @attribute\n   */\n  @property({ type: String, reflect: true }) list?: string;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected hasIcon: boolean;\n\n  /**\n   * Determines when the element has an image in the \"avatar\" slot.\n   */\n  @state() protected hasAvatar: boolean;\n\n  constructor() {\n    super();\n\n    this.disabled = false;\n    this.type = ChipType.assist;\n    this.hasIcon = false;\n    this.hasAvatar = false;\n\n    this.actionController.cancelKeyboardEvents = true;\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.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('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', 'button');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (this.type === ChipType.filter && e.code === 'ArrowDown') {\n      e.preventDefault();\n      this.listAction();\n    } else if (this.closable && e.code === 'Backspace') {\n      e.preventDefault();\n      this.closeAction();\n    }\n  }\n\n  protected async handleFocus(): Promise<void> {\n    const element = await this.getRipple();\n    element?.beginFocus();\n  }\n\n  protected async handleBlur(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endFocus();\n  }\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  override endPress(info: EndPressConfig): void {\n    super.endPress(info);\n    this.endRipple();\n    const { cancelled, reason } = info;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    if (this.type === ChipType.filter) {\n      this.toggleChecked();\n    }\n  }\n\n  /**\n   * Toggles the \"filter\" type of the chip.\n   */\n  toggleChecked(): void {\n    this.checked = !this.checked;\n    this.dispatchEvent(new Event('select'));\n  }\n\n  /**\n   * Sets the `hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedNodes().length;\n  }\n\n  /**\n   * Sets the `_hasAvatar` state property when the \"avatar\" slot change event is dispatched.\n   */\n  protected handleAvatarSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasAvatar = !!slot.assignedNodes().length;\n  }\n\n  protected handleListClick(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.listAction();\n  }\n\n  protected handleClose(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.closeAction();\n  }\n\n  protected async closeAction(): Promise<void> {\n    this.dispatchEvent(new Event('close'));\n  }\n\n  protected async listAction(): Promise<void> {\n    this.dispatchEvent(new Event('list'));\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      withAvatar: this.hasAvatar,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${this.renderLeadingIcon()}\n        ${this.renderAvatar()}\n        <slot></slot>\n        ${this.renderTrailingIcon()}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderLeadingIcon(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.suggestion) {\n      return nothing;\n    }\n    if (type === ChipType.filter) {\n      const iconClasses = classMap({\n        'leading-icon': true,\n        'check-mark': true,\n        checked: !!this.checked,\n      });\n      return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`;\n    }\n    return html`<slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>`;\n  }\n\n  protected renderAvatar(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.input) {\n      return html`<slot name=\"avatar\" @slotchange=\"${this.handleAvatarSlotChange}\"></slot>`;\n    }\n    return nothing;\n  }\n\n  protected renderTrailingIcon(): TemplateResult | typeof nothing {\n    const { closable=false, list, type } = this;\n    if (type === ChipType.filter) {\n      if (list) {\n        return html`<span class=\"trailing-icon\" role=\"presentation\" @click=\"${this.handleListClick}\" @keypress=\"${EventUtils.cancelEvent}\">${arrowDropDown}</span>`;\n      }\n    }\n    if (type === ChipType.input && closable) {\n      return html`<span \n        class=\"trailing-icon\" \n        @click=\"${this.handleClose}\" \n        @keypress=\"${EventUtils.cancelEvent}\"\n        role=\"button\"\n        aria-label=\"Activate to close or disabled this chip.\"\n      >${close}</span>`;\n    }\n    return nothing;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"UiChip.js","sourceRoot":"","sources":["../../../src/ui/chip/UiChip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { EventUtils } from \"@api-client/core/build/browser.js\"; // build/src/lib/events/Utils.js\nimport { UiElement } from \"../UiElement.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport { close, arrowDropDown, check } from \"../icons/Icons.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport enum ChipType {\n  assist = 'assist',\n  filter = 'filter',\n  input = 'input',\n  suggestion = 'suggestion',\n}\n\n/**\n * @slot icon - The leading icon, sized 18x18 px\n * @slot avatar - The leading image, sized 24x24 px\n * @fires list - When the user requested to activate the list associated with the element.\n * @fires select - When the checked state changed through a user interaction. This only related to `filter` chips. Note, `select` is dispatched just before the `click` event.\n */\nexport default class UiChip extends UiElement {\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 type of the rendered chip.\n   * @attribute\n   * \n   * @see https://m3.material.io/components/chips/guidelines\n   */\n  @property({ type: String }) type: ChipType;\n\n  /**\n   * Whether the chip should be rendered as elevated.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) elevated?: boolean;\n\n  /**\n   * Whether the chip renders the \"close\" icon at the end.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) closable?: boolean;\n\n  /**\n   * Whether the chip is currently checked.\n   * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) checked?: boolean;\n\n  /**\n   * The ID attribute of the list element that is rendered after activating the chip.\n   * When this is set the chip renders the dropdown icon at the end and sets `aria-*` \n   * attributes informing the assistive technology that this chip controls a list.\n   * \n   * @attribute\n   */\n  @property({ type: String, reflect: true }) list?: string;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected hasIcon: boolean;\n\n  /**\n   * Determines when the element has an image in the \"avatar\" slot.\n   */\n  @state() protected hasAvatar: boolean;\n\n  constructor() {\n    super();\n\n    this.disabled = false;\n    this.type = ChipType.assist;\n    this.hasIcon = false;\n    this.hasAvatar = false;\n\n    this.actionController.cancelKeyboardEvents = true;\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.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('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', 'button');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (this.type === ChipType.filter && e.code === 'ArrowDown') {\n      e.preventDefault();\n      this.listAction();\n    } else if (this.closable && e.code === 'Backspace') {\n      e.preventDefault();\n      this.closeAction();\n    }\n  }\n\n  protected async handleFocus(): Promise<void> {\n    const element = await this.getRipple();\n    element?.beginFocus();\n  }\n\n  protected async handleBlur(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endFocus();\n  }\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  override endPress(info: EndPressConfig): void {\n    super.endPress(info);\n    this.endRipple();\n    const { cancelled, reason } = info;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    if (this.type === ChipType.filter) {\n      this.toggleChecked();\n    }\n  }\n\n  /**\n   * Toggles the \"filter\" type of the chip.\n   */\n  toggleChecked(): void {\n    this.checked = !this.checked;\n    this.dispatchEvent(new Event('select'));\n  }\n\n  /**\n   * Sets the `hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedNodes().length;\n  }\n\n  /**\n   * Sets the `_hasAvatar` state property when the \"avatar\" slot change event is dispatched.\n   */\n  protected handleAvatarSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasAvatar = !!slot.assignedNodes().length;\n  }\n\n  protected handleListClick(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.listAction();\n  }\n\n  protected handleClose(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.closeAction();\n  }\n\n  protected async closeAction(): Promise<void> {\n    this.dispatchEvent(new Event('close'));\n  }\n\n  protected async listAction(): Promise<void> {\n    this.dispatchEvent(new Event('list'));\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      withAvatar: this.hasAvatar,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${this.renderLeadingIcon()}\n        ${this.renderAvatar()}\n        <slot></slot>\n        ${this.renderTrailingIcon()}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderLeadingIcon(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.suggestion) {\n      return nothing;\n    }\n    if (type === ChipType.filter) {\n      const iconClasses = classMap({\n        'leading-icon': true,\n        'check-mark': true,\n        checked: !!this.checked,\n      });\n      return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`;\n    }\n    return html`<slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>`;\n  }\n\n  protected renderAvatar(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.input) {\n      return html`<slot name=\"avatar\" @slotchange=\"${this.handleAvatarSlotChange}\"></slot>`;\n    }\n    return nothing;\n  }\n\n  protected renderTrailingIcon(): TemplateResult | typeof nothing {\n    const { closable=false, list, type } = this;\n    if (type === ChipType.filter) {\n      if (list) {\n        return html`<span class=\"trailing-icon\" role=\"presentation\" @click=\"${this.handleListClick}\" @keypress=\"${EventUtils.cancelEvent}\">${arrowDropDown}</span>`;\n      }\n    }\n    if (type === ChipType.input && closable) {\n      return html`<span \n        class=\"trailing-icon\" \n        @click=\"${this.handleClose}\" \n        @keypress=\"${EventUtils.cancelEvent}\"\n        role=\"button\"\n        aria-label=\"Activate to close or disabled this chip.\"\n      >${close}</span>`;\n    }\n    return nothing;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}