@api-client/ui 0.0.3 → 0.0.5

package/dist/store/HttpStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"HttpStore.js","sourceRoot":"","sources":["../../src/store/HttpStore.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { StoreSdk, RouteBuilder } from '@api-client/core/build/browser.js';\nimport { IConfigEnvironment } from '../lib/config/Config.js';\n\nexport interface ISessionInitInfo {\n  /**\n   * The user access token to the store.\n   */\n  token: string;\n  /**\n   * When the token expires, if ever.\n   */\n  expires?: number;\n  /**\n   * Whether a new token was generated or the stored token is valid.\n   */\n  new: boolean;\n}\n\n/**\n * The client (web) side store.\n */\nexport class HttpStore {\n  sdk: StoreSdk;\n\n  url: string;\n\n  env?: IConfigEnvironment;\n\n  /**\n   * @deprecated Use the `constructor(env: IConfigEnvironment)` constructor.\n   * @param env The store environment to use.\n   */\n  static fromEnvironment(env: IConfigEnvironment): HttpStore {\n    const { location } = env;\n    const store = new HttpStore(location);\n    store.env = env;\n    return store;\n  }\n\n  /**\n   * @deprecated Use the `constructor(env: IConfigEnvironment)` constructor.\n   * @param url The store URL.\n   */\n  constructor(url: string);\n\n  constructor(env: IConfigEnvironment);\n\n  constructor(envOrUrl: string | IConfigEnvironment) {\n    if (!envOrUrl) {\n      throw new Error(`Expected an argument.`);\n    }\n    if (typeof envOrUrl === 'string') {\n      if (envOrUrl.endsWith('/')) {\n        envOrUrl = envOrUrl.substring(0, envOrUrl.length - 1);\n      }\n      this.url = envOrUrl;\n      this.sdk = new StoreSdk(envOrUrl);\n    } else {\n      this.env = envOrUrl;\n      const { location } = envOrUrl;\n      this.url = location;\n      this.sdk = new StoreSdk(location);\n    }\n  }\n\n  /**\n   * Checks whether the environment has the token and whether this token \n   * can make requests to the store.\n   * \n   * @param env Optional environment. By default is uses the one defined on the class.\n   */\n  async isAuthenticated(env = this.env): Promise<boolean> {\n    if (!env) {\n      throw new Error(`The environment either has to be set on the HttpStore class or passed as an argument.`);\n    }\n    const { token } = env;\n    if (!token) {\n      return false;\n    }\n    try {\n      const meUri = this.sdk.getUrl(RouteBuilder.usersMe()).toString();\n      const user = await this.sdk.http.get(meUri, { token });\n      const ok = user.status === 200;\n      if (ok) {\n        env.authenticated = true;\n        this.sdk.token = token;\n      }\n      return user.status === 200;\n    } catch (e) {\n      return false;\n    }\n  }\n\n  /**\n   * Creates a session in the store and authenticates the user when needed.\n   * @param env Optional environment to authenticate if should be different than the current\n   * @param force Forces logging in even when the token is valid.\n   */\n  async getStoreSessionToken(env = this.env, force = false): Promise<ISessionInitInfo> {\n    if (!env) {\n      throw new Error(`The environment either has to be set on the HttpStore class or passed as an argument.`);\n    }\n    const meUri = this.sdk.getUrl(RouteBuilder.usersMe()).toString();\n    const result: ISessionInitInfo = {\n      token: env.token || '',\n      expires: env.tokenExpires,\n      new: false,\n    };\n    \n    if (!force && result.token) {\n      const user = await this.sdk.http.get(meUri, { token: result.token });\n      if (user.status === 200) {\n        env.authenticated = true;\n        this.sdk.token = result.token;\n        return result;\n      }\n    }\n\n    result.token = '';\n    delete result.expires;\n    result.new = true;\n\n    const info = await this.sdk.auth.createSession();\n    result.token = info.token;\n    this.sdk.token = info.token;\n    env.token = info.token;\n    env.authenticated = false;\n    if (info.expires) {\n      env.tokenExpires = info.expires * 1000;\n    }\n\n    const user = await this.sdk.http.get(meUri, { token: result.token });\n    \n    if (user.status === 200) {\n      env.authenticated = true;\n    } else {\n      await this.authenticateStore();\n      env.authenticated = true;\n    }\n    return result;\n  }\n\n  /**\n   * Authenticates the user in the store.\n   * Note, it opens the browser to the login endpoint.\n   */\n  async authenticateStore(): Promise<void> {\n    const loginEndpoint = this.sdk.getUrl('/auth/login').toString();\n    const result = await this.sdk.http.post(loginEndpoint);\n    if (result.status !== 204) {\n      throw new Error(`Unable to create the authorization session on the store. Invalid status code: ${result.status}.`);\n    }\n    const location = result.headers.get('location');\n    if (!location) {\n      throw new Error(`Unable to create the authorization session on the store. The location header is missing.`);\n    }\n    const authEndpoint = this.sdk.getUrl(location).toString();\n    const handle = window.open(authEndpoint);\n    if (!handle) {\n      throw new Error(`Unable to open an auth window.`);\n    }\n    await this.sdk.auth.listenAuth('/events');\n    handle.close();\n  }\n}\n"]}
+{"version":3,"file":"HttpStore.js","sourceRoot":"","sources":["../../src/store/HttpStore.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { StoreSdk, RouteBuilder } from '@api-client/core/build/browser.js';\nimport { IConfigEnvironment } from '../lib/config/Config.js';\n\nexport interface ISessionInitInfo {\n  /**\n   * The user access token to the store.\n   */\n  token: string;\n  /**\n   * When the token expires, if ever.\n   */\n  expires?: number;\n  /**\n   * Whether a new token was generated or the stored token is valid.\n   */\n  new: boolean;\n}\n\n/**\n * The client (web) side store.\n */\nexport class HttpStore {\n  sdk: StoreSdk;\n\n  url: string;\n\n  env?: IConfigEnvironment;\n\n  /**\n   * @deprecated Use the `constructor(env: IConfigEnvironment)` constructor.\n   * @param env The store environment to use.\n   */\n  static fromEnvironment(env: IConfigEnvironment): HttpStore {\n    const { location } = env;\n    const store = new HttpStore(location);\n    store.env = env;\n    return store;\n  }\n\n  /**\n   * @deprecated Use the `constructor(env: IConfigEnvironment)` constructor.\n   * @param url The store URL.\n   */\n  constructor(url: string);\n\n  constructor(env: IConfigEnvironment);\n\n  constructor(envOrUrl: string | IConfigEnvironment) {\n    if (!envOrUrl) {\n      throw new Error(`Expected an argument.`);\n    }\n    if (typeof envOrUrl === 'string') {\n      if (envOrUrl.endsWith('/')) {\n        envOrUrl = envOrUrl.substring(0, envOrUrl.length - 1);\n      }\n      this.url = envOrUrl;\n      this.sdk = new StoreSdk(envOrUrl);\n    } else {\n      this.env = envOrUrl;\n      const { location } = envOrUrl;\n      this.url = location;\n      this.sdk = new StoreSdk(location);\n    }\n  }\n\n  /**\n   * Checks whether the environment has the token and whether this token \n   * can make requests to the store.\n   * \n   * @param env Optional environment. By default is uses the one defined on the class.\n   */\n  async isAuthenticated(env = this.env): Promise<boolean> {\n    if (!env) {\n      throw new Error(`The environment either has to be set on the HttpStore class or passed as an argument.`);\n    }\n    const { token } = env;\n    if (!token) {\n      return false;\n    }\n    try {\n      const meUri = this.sdk.getUrl(RouteBuilder.usersMe()).toString();\n      const user = await this.sdk.http.get(meUri, { token });\n      const ok = user.status === 200;\n      if (ok) {\n        env.authenticated = true;\n        this.sdk.token = token;\n      }\n      return user.status === 200;\n    } catch (e) {\n      return false;\n    }\n  }\n\n  /**\n   * Creates a session in the store and authenticates the user when needed.\n   * @param env Optional environment to authenticate if should be different than the current\n   * @param force Forces logging in even when the token is valid.\n   */\n  async getStoreSessionToken(env = this.env, force = false): Promise<ISessionInitInfo> {\n    if (!env) {\n      throw new Error(`The environment either has to be set on the HttpStore class or passed as an argument.`);\n    }\n    const meUri = this.sdk.getUrl(RouteBuilder.usersMe()).toString();\n    const result: ISessionInitInfo = {\n      token: env.token || '',\n      expires: env.tokenExpires,\n      new: false,\n    };\n    \n    if (!force && result.token) {\n      const user = await this.sdk.http.get(meUri, { token: result.token });\n      if (user.status === 200) {\n        env.authenticated = true;\n        this.sdk.token = result.token;\n        return result;\n      }\n    }\n\n    result.token = '';\n    delete result.expires;\n    result.new = true;\n\n    const info = await this.sdk.auth.createSession();\n    result.token = info.token;\n    this.sdk.token = info.token;\n    env.token = info.token;\n    env.authenticated = false;\n    if (info.expires) {\n      env.tokenExpires = info.expires * 1000;\n    }\n\n    const user = await this.sdk.http.get(meUri, { token: result.token });\n    \n    if (user.status === 200) {\n      env.authenticated = true;\n    } else {\n      await this.authenticateStore();\n      env.authenticated = true;\n    }\n    return result;\n  }\n\n  /**\n   * Authenticates the user in the store.\n   * Note, it opens the browser to the login endpoint.\n   */\n  async authenticateStore(): Promise<void> {\n    const loginEndpoint = this.sdk.getUrl('/auth/login').toString();\n    const result = await this.sdk.http.post(loginEndpoint);\n    if (result.status !== 204) {\n      throw new Error(`Unable to create the authorization session on the store. Invalid status code: ${result.status}.`);\n    }\n    const location = result.headers.get('location');\n    if (!location) {\n      throw new Error(`Unable to create the authorization session on the store. The location header is missing.`);\n    }\n    const authEndpoint = this.sdk.getUrl(location).toString();\n    const handle = window.open(authEndpoint);\n    if (!handle) {\n      throw new Error(`Unable to open an auth window.`);\n    }\n    await this.sdk.auth.listenAuth('/events');\n    handle.close();\n  }\n}\n"]}

package/dist/store/UserCache.js

@@ -5,12 +5,12 @@ import { ConfigBroadcastChannel } from "../lib/config/Config.js";
  * of requests to the backend requesting a user info.
  */
 class UserCache {
-    cached = new Map();
-    /**
-     * Application configuration broadcast channel.
-     */
-    configBroadcast = new BroadcastChannel(ConfigBroadcastChannel);
     constructor() {
+        this.cached = new Map();
+        /**
+         * Application configuration broadcast channel.
+         */
+        this.configBroadcast = new BroadcastChannel(ConfigBroadcastChannel);
         this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this));
     }
     async getUser(key) {

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":"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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"]}

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 })