@api-client/ui 0.1.3 → 0.1.5

package/build/src/core/Model.d.ts

@@ -1,3 +1,43 @@
+import type { Exception } from '@api-client/core/exceptions/exception.js';
+/**
+ * Defines the options for the retry mechanism.
+ */
+export interface RetryOptions {
+    /**
+     * The maximum number of retry attempts.
+     * Defaults to 3.
+     */
+    retries?: number;
+    /**
+     * The delay in milliseconds before the next retry.
+     * Can be a fixed number or a function that returns a number (e.g., for exponential backoff).
+     * Defaults to 1000ms.
+     */
+    delayMs?: number | ((attempt: number) => number);
+    /**
+     * An optional function that determines if a retry should be attempted based on the error.
+     * If not provided, all errors will trigger a retry up to the maximum number of retries.
+     * @param error The error that occurred.
+     * @returns True if a retry should be attempted, false otherwise.
+     */
+    shouldRetry?: (error: Error) => boolean;
+}
+/**
+ * Calculates an exponential backoff delay for retry attempts.
+ * The delay doubles with each attempt.
+ *
+ * @param attempt The current retry attempt number (should be 1-indexed).
+ * @param initialDelay The initial delay in milliseconds. Defaults to 1000ms.
+ * @returns The calculated delay in milliseconds.
+ */
+export declare function exponentialBackoffDelay(attempt: number, initialDelay?: number): number;
+/**
+ * Checks if the API error should be retried based on its status code.
+ * If the status code is 404, it returns false (do not retry).
+ * For other status codes, it returns true (retry).
+ * @param error The error to check.
+ */
+export declare function shouldRetryApiError(error: Exception): boolean;
 /**
  * The base class for models.
  *
@@ -36,6 +76,10 @@ export declare abstract class Model<T> extends EventTarget {
      * @type A promise resolved when the debounced task finished.
      */
     get taskComplete(): Promise<void> | undefined;
+    /**
+     * A getter for the raw value.
+     */
+    get value(): T | undefined;
     /**
      * @param obj The source object to use.
      */
@@ -53,5 +97,28 @@ export declare abstract class Model<T> extends EventTarget {
     debounce(callback: (...args: unknown[]) => unknown): void;
     notifyError(error: Error): void;
     protected resolveTaskPromise(): void;
+    /**
+     * Executes an asynchronous operation with a retry mechanism.
+     * @param operation A function that returns a Promise to be executed.
+     * @param options Optional retry configurations.
+     * @returns A Promise that resolves with the result of the operation or rejects if all retries fail.
+     * @example
+     * ```typescript
+     * override async create(data: Partial<IUser>): Promise<IUser> {
+     *   const operation = async (): Promise<UserData> => {
+     *     // ... perform API call to create user
+     *   }
+     *   const retryOptions: RetryOptions = {
+     *     retries: 5,
+     *     delayMs: exponentialBackoffDelay,
+     *     shouldRetry: shouldRetryApiError,
+     *   }
+     *   this.raw = await this.retry(operation)
+     *   this.dispatchEvent(new CustomEvent('data-changed', { detail: this.raw }))
+     *   return this.raw;
+     * }
+     * ```
+     */
+    protected retry<R>(operation: () => Promise<R>, options?: RetryOptions): Promise<R>;
 }
 //# sourceMappingURL=Model.d.ts.map

package/build/src/core/Model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Model.d.ts","sourceRoot":"","sources":["../../../src/core/Model.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AACH,8BAAsB,KAAK,CAAC,CAAC,CAAE,SAAQ,WAAW;;IAChD;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,CAAC,CAAA;IAEP;;;;OAIG;IACH,eAAe,SAAM;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,CAAA;IAExC;;OAEG;IACH,KAAK,SAAK;IAiBV;;OAEG;IACH,IAAI,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,CAE5C;IAED;;OAEG;gBACS,GAAG,CAAC,EAAE,CAAC;IAMnB;;;;;;;;OAQG;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAIpC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,GAAG,IAAI;IAqBzD,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAe/B,SAAS,CAAC,kBAAkB,IAAI,IAAI;CAUrC"}
+{"version":3,"file":"Model.d.ts","sourceRoot":"","sources":["../../../src/core/Model.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAA;AAEzE;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IAChD;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAA;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,SAAO,GAAG,MAAM,CAIpF;AACD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAO7D;AACD;;;;;;;;;GASG;AACH,8BAAsB,KAAK,CAAC,CAAC,CAAE,SAAQ,WAAW;;IAChD;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,CAAC,CAAA;IAEP;;;;OAIG;IACH,eAAe,SAAM;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,CAAA;IAExC;;OAEG;IACH,KAAK,SAAK;IAiBV;;OAEG;IACH,IAAI,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,CAE5C;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAEzB;IAED;;OAEG;gBACS,GAAG,CAAC,EAAE,CAAC;IAMnB;;;;;;;;OAQG;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAIpC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,GAAG,IAAI;IAqBzD,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAe/B,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAWpC;;;;;;;;;;;;;;;;;;;;;OAqBG;cACa,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,CAAC,CAAC;CAmC9F"}

package/build/src/core/Model.js

@@ -1,4 +1,32 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Calculates an exponential backoff delay for retry attempts.
+ * The delay doubles with each attempt.
+ *
+ * @param attempt The current retry attempt number (should be 1-indexed).
+ * @param initialDelay The initial delay in milliseconds. Defaults to 1000ms.
+ * @returns The calculated delay in milliseconds.
+ */
+export function exponentialBackoffDelay(attempt, initialDelay = 1000) {
+    if (attempt <= 0)
+        return initialDelay;
+    // For attempt 1, delay is initialDelay * 2^0 = initialDelay
+    return initialDelay * Math.pow(2, attempt - 1);
+}
+/**
+ * Checks if the API error should be retried based on its status code.
+ * If the status code is 404, it returns false (do not retry).
+ * For other status codes, it returns true (retry).
+ * @param error The error to check.
+ */
+export function shouldRetryApiError(error) {
+    const { status } = error;
+    if (status === 404) {
+        // Do not retry on 404 errors
+        return false;
+    }
+    return true;
+}
 /**
  * The base class for models.
  *
@@ -50,6 +78,12 @@ export class Model extends EventTarget {
     get taskComplete() {
         return this.#taskComplete;
     }
+    /**
+     * A getter for the raw value.
+     */
+    get value() {
+        return this.raw;
+    }
     /**
      * @param obj The source object to use.
      */
@@ -113,5 +147,60 @@ export class Model extends EventTarget {
             resolver();
         }
     }
+    /**
+     * Executes an asynchronous operation with a retry mechanism.
+     * @param operation A function that returns a Promise to be executed.
+     * @param options Optional retry configurations.
+     * @returns A Promise that resolves with the result of the operation or rejects if all retries fail.
+     * @example
+     * ```typescript
+     * override async create(data: Partial<IUser>): Promise<IUser> {
+     *   const operation = async (): Promise<UserData> => {
+     *     // ... perform API call to create user
+     *   }
+     *   const retryOptions: RetryOptions = {
+     *     retries: 5,
+     *     delayMs: exponentialBackoffDelay,
+     *     shouldRetry: shouldRetryApiError,
+     *   }
+     *   this.raw = await this.retry(operation)
+     *   this.dispatchEvent(new CustomEvent('data-changed', { detail: this.raw }))
+     *   return this.raw;
+     * }
+     * ```
+     */
+    async retry(operation, options = {}) {
+        const { retries = 3, delayMs = 1000, shouldRetry = () => true } = options;
+        let lastError;
+        for (let attempt = 0; attempt < retries; attempt++) {
+            try {
+                return await operation();
+            }
+            catch (e) {
+                lastError = e;
+                if (!shouldRetry(lastError) || attempt === retries - 1) {
+                    // Do not retry if shouldRetry returns false or if it's the last attempt
+                    this.notifyError(lastError);
+                    throw lastError;
+                }
+                const delay = typeof delayMs === 'function' ? delayMs(attempt + 1) : delayMs;
+                if (delay > 0) {
+                    await new Promise((resolve) => setTimeout(resolve, delay));
+                }
+            }
+        }
+        // This part should ideally not be reached if retries > 0,
+        // as the loop would throw on the last attempt.
+        // However, to satisfy TypeScript and guard against retries = 0:
+        if (lastError) {
+            this.notifyError(lastError);
+            throw lastError;
+        }
+        // Should not happen if operation is called at least once.
+        // Adding a generic error for completeness.
+        const err = new Error('Retry operation failed without a specific error.');
+        this.notifyError(err);
+        throw err;
+    }
 }
 //# sourceMappingURL=Model.js.map

package/build/src/core/Model.js.map

@@ -1 +1 @@
-{"version":3,"file":"Model.js","sourceRoot":"","sources":["../../../src/core/Model.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD;;;;;;;;;GASG;AACH,MAAM,OAAgB,KAAS,SAAQ,WAAW;IAChD;;;;;;OAMG;IACH,GAAG,CAAI;IAEP;;;;OAIG;IACH,eAAe,GAAG,GAAG,CAAA;IAErB;;OAEG;IACH,cAAc,CAA0B;IAExC;;OAEG;IACH,KAAK,GAAG,EAAE,CAAA;IAEV;;OAEG;IACH,sBAAsB,GAAG,KAAK,CAAA;IAE9B;;OAEG;IACH,aAAa,CAAgB;IAE7B;;OAEG;IACH,aAAa,CAAa;IAE1B;;OAEG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,aAAa,CAAA;IAC3B,CAAC;IAED;;OAEG;IACH,YAAY,GAAO;QACjB,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,CAAC,IAAgB;QACrB,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;IACrC,CAAC;IAED,QAAQ,CAAC,QAAyC;QAChD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QACnC,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACjC,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,KAAK,IAAI,EAAE;YAC1C,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;YAC/B,IAAI,CAAC;gBACH,MAAM,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC3B,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,MAAM,GAAG,GAAG,CAAU,CAAA;gBACtB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;gBACrB,MAAM,GAAG,CAAA;YACX,CAAC;oBAAS,CAAC;gBACT,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC3B,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;IAC1B,CAAC;IAED,WAAW,CAAC,KAAY;QACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAQ,OAAO,EAAE;YAC9B,MAAM,EAAE,KAAK;SACd,CAAC,CACH,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YACjD,IAAI,CAAC,aAAa,GAAG,OAAO,CAAA;YAC5B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAA;QACpC,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACjC,OAAM;QACR,CAAC;QACD,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAA;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAA;QACnC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC;CACF","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * The base class for models.\n *\n * Models wrap a logic related to manipulating model data, querying for data from the API,\n * retry logic, cashing, refreshing of data, offline storage, pooling endpoints for new data, etc.\n *\n * The application should use these models in order to centralize object manipulation.\n *\n * @template T The underlying domain model.\n */\nexport abstract class Model<T> extends EventTarget {\n  /**\n   * The underlying raw object.\n   * Do not modify properties of the object directly.\n   * Use one of the methods provided by the model.\n   * Direct changes will not be reflected in the UI\n   * and may cause issues when processing the object.\n   */\n  raw?: T\n\n  /**\n   * The timeout for the query debouncer.\n   * When any property change this is the time the element will wait\n   * until the actual query is made.\n   */\n  debounceTimeout = 100\n\n  /**\n   * A reference to the current debouncer.\n   */\n  debouncerValue?: number | NodeJS.Timeout\n\n  /**\n   * Default limit for list queries.\n   */\n  limit = 30\n\n  /**\n   * A flag that helps to determine whether the `taskComplete` is setup.\n   */\n  #hasPendingTaskPromise = false\n\n  /**\n   * A hidden value for the `taskComplete` getter.\n   */\n  #taskComplete?: Promise<void>\n\n  /**\n   * The resolver to call when the debounced task completes.\n   */\n  #taskResolver?: () => void\n\n  /**\n   * @type A promise resolved when the debounced task finished.\n   */\n  get taskComplete(): Promise<void> | undefined {\n    return this.#taskComplete\n  }\n\n  /**\n   * @param obj The source object to use.\n   */\n  constructor(obj?: T) {\n    super()\n    this.raw = obj\n    this.#setUpdatePromise()\n  }\n\n  /**\n   * Creates a new instance of the data. It often invokes API call.\n   * This is what happens after the user triggers \"create new\" flow.\n   *\n   * After this method is calls, the `raw` object is set.\n   *\n   * @param data The partial data to create.\n   * @returns The created object.\n   */\n  create(data: Partial<T>): Promise<T> {\n    throw new Error(`Not implemented.`)\n  }\n\n  debounce(callback: (...args: unknown[]) => unknown): void {\n    if (this.debouncerValue) {\n      clearTimeout(this.debouncerValue)\n    }\n    if (!this.#hasPendingTaskPromise) {\n      this.#setUpdatePromise()\n    }\n    this.debouncerValue = setTimeout(async () => {\n      this.debouncerValue = undefined\n      try {\n        await callback.call(this)\n      } catch (e) {\n        const err = e as Error\n        this.notifyError(err)\n        throw err\n      } finally {\n        this.resolveTaskPromise()\n      }\n    }, this.debounceTimeout)\n  }\n\n  notifyError(error: Error): void {\n    this.dispatchEvent(\n      new CustomEvent<Error>('error', {\n        detail: error,\n      })\n    )\n  }\n\n  #setUpdatePromise(): void {\n    this.#taskComplete = new Promise<void>((resolve) => {\n      this.#taskResolver = resolve\n      this.#hasPendingTaskPromise = true\n    })\n  }\n\n  protected resolveTaskPromise(): void {\n    if (!this.#hasPendingTaskPromise) {\n      return\n    }\n    this.#hasPendingTaskPromise = false\n    const resolver = this.#taskResolver\n    if (resolver) {\n      resolver()\n    }\n  }\n}\n"]}
+{"version":3,"file":"Model.js","sourceRoot":"","sources":["../../../src/core/Model.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n\nimport type { Exception } from '@api-client/core/exceptions/exception.js'\n\n/**\n * Defines the options for the retry mechanism.\n */\nexport interface RetryOptions {\n  /**\n   * The maximum number of retry attempts.\n   * Defaults to 3.\n   */\n  retries?: number\n  /**\n   * The delay in milliseconds before the next retry.\n   * Can be a fixed number or a function that returns a number (e.g., for exponential backoff).\n   * Defaults to 1000ms.\n   */\n  delayMs?: number | ((attempt: number) => number)\n  /**\n   * An optional function that determines if a retry should be attempted based on the error.\n   * If not provided, all errors will trigger a retry up to the maximum number of retries.\n   * @param error The error that occurred.\n   * @returns True if a retry should be attempted, false otherwise.\n   */\n  shouldRetry?: (error: Error) => boolean\n}\n\n/**\n * Calculates an exponential backoff delay for retry attempts.\n * The delay doubles with each attempt.\n *\n * @param attempt The current retry attempt number (should be 1-indexed).\n * @param initialDelay The initial delay in milliseconds. Defaults to 1000ms.\n * @returns The calculated delay in milliseconds.\n */\nexport function exponentialBackoffDelay(attempt: number, initialDelay = 1000): number {\n  if (attempt <= 0) return initialDelay\n  // For attempt 1, delay is initialDelay * 2^0 = initialDelay\n  return initialDelay * Math.pow(2, attempt - 1)\n}\n/**\n * Checks if the API error should be retried based on its status code.\n * If the status code is 404, it returns false (do not retry).\n * For other status codes, it returns true (retry).\n * @param error The error to check.\n */\nexport function shouldRetryApiError(error: Exception): boolean {\n  const { status } = error\n  if (status === 404) {\n    // Do not retry on 404 errors\n    return false\n  }\n  return true\n}\n/**\n * The base class for models.\n *\n * Models wrap a logic related to manipulating model data, querying for data from the API,\n * retry logic, cashing, refreshing of data, offline storage, pooling endpoints for new data, etc.\n *\n * The application should use these models in order to centralize object manipulation.\n *\n * @template T The underlying domain model.\n */\nexport abstract class Model<T> extends EventTarget {\n  /**\n   * The underlying raw object.\n   * Do not modify properties of the object directly.\n   * Use one of the methods provided by the model.\n   * Direct changes will not be reflected in the UI\n   * and may cause issues when processing the object.\n   */\n  raw?: T\n\n  /**\n   * The timeout for the query debouncer.\n   * When any property change this is the time the element will wait\n   * until the actual query is made.\n   */\n  debounceTimeout = 100\n\n  /**\n   * A reference to the current debouncer.\n   */\n  debouncerValue?: number | NodeJS.Timeout\n\n  /**\n   * Default limit for list queries.\n   */\n  limit = 30\n\n  /**\n   * A flag that helps to determine whether the `taskComplete` is setup.\n   */\n  #hasPendingTaskPromise = false\n\n  /**\n   * A hidden value for the `taskComplete` getter.\n   */\n  #taskComplete?: Promise<void>\n\n  /**\n   * The resolver to call when the debounced task completes.\n   */\n  #taskResolver?: () => void\n\n  /**\n   * @type A promise resolved when the debounced task finished.\n   */\n  get taskComplete(): Promise<void> | undefined {\n    return this.#taskComplete\n  }\n\n  /**\n   * A getter for the raw value.\n   */\n  get value(): T | undefined {\n    return this.raw\n  }\n\n  /**\n   * @param obj The source object to use.\n   */\n  constructor(obj?: T) {\n    super()\n    this.raw = obj\n    this.#setUpdatePromise()\n  }\n\n  /**\n   * Creates a new instance of the data. It often invokes API call.\n   * This is what happens after the user triggers \"create new\" flow.\n   *\n   * After this method is calls, the `raw` object is set.\n   *\n   * @param data The partial data to create.\n   * @returns The created object.\n   */\n  create(data: Partial<T>): Promise<T> {\n    throw new Error(`Not implemented.`)\n  }\n\n  debounce(callback: (...args: unknown[]) => unknown): void {\n    if (this.debouncerValue) {\n      clearTimeout(this.debouncerValue)\n    }\n    if (!this.#hasPendingTaskPromise) {\n      this.#setUpdatePromise()\n    }\n    this.debouncerValue = setTimeout(async () => {\n      this.debouncerValue = undefined\n      try {\n        await callback.call(this)\n      } catch (e) {\n        const err = e as Error\n        this.notifyError(err)\n        throw err\n      } finally {\n        this.resolveTaskPromise()\n      }\n    }, this.debounceTimeout)\n  }\n\n  notifyError(error: Error): void {\n    this.dispatchEvent(\n      new CustomEvent<Error>('error', {\n        detail: error,\n      })\n    )\n  }\n\n  #setUpdatePromise(): void {\n    this.#taskComplete = new Promise<void>((resolve) => {\n      this.#taskResolver = resolve\n      this.#hasPendingTaskPromise = true\n    })\n  }\n\n  protected resolveTaskPromise(): void {\n    if (!this.#hasPendingTaskPromise) {\n      return\n    }\n    this.#hasPendingTaskPromise = false\n    const resolver = this.#taskResolver\n    if (resolver) {\n      resolver()\n    }\n  }\n\n  /**\n   * Executes an asynchronous operation with a retry mechanism.\n   * @param operation A function that returns a Promise to be executed.\n   * @param options Optional retry configurations.\n   * @returns A Promise that resolves with the result of the operation or rejects if all retries fail.\n   * @example\n   * ```typescript\n   * override async create(data: Partial<IUser>): Promise<IUser> {\n   *   const operation = async (): Promise<UserData> => {\n   *     // ... perform API call to create user\n   *   }\n   *   const retryOptions: RetryOptions = {\n   *     retries: 5,\n   *     delayMs: exponentialBackoffDelay,\n   *     shouldRetry: shouldRetryApiError,\n   *   }\n   *   this.raw = await this.retry(operation)\n   *   this.dispatchEvent(new CustomEvent('data-changed', { detail: this.raw }))\n   *   return this.raw;\n   * }\n   * ```\n   */\n  protected async retry<R>(operation: () => Promise<R>, options: RetryOptions = {}): Promise<R> {\n    const { retries = 3, delayMs = 1000, shouldRetry = () => true } = options\n\n    let lastError: Error | undefined\n\n    for (let attempt = 0; attempt < retries; attempt++) {\n      try {\n        return await operation()\n      } catch (e) {\n        lastError = e as Error\n        if (!shouldRetry(lastError) || attempt === retries - 1) {\n          // Do not retry if shouldRetry returns false or if it's the last attempt\n          this.notifyError(lastError)\n          throw lastError\n        }\n\n        const delay = typeof delayMs === 'function' ? delayMs(attempt + 1) : delayMs\n        if (delay > 0) {\n          await new Promise((resolve) => setTimeout(resolve, delay))\n        }\n      }\n    }\n    // This part should ideally not be reached if retries > 0,\n    // as the loop would throw on the last attempt.\n    // However, to satisfy TypeScript and guard against retries = 0:\n    if (lastError) {\n      this.notifyError(lastError)\n      throw lastError\n    }\n    // Should not happen if operation is called at least once.\n    // Adding a generic error for completeness.\n    const err = new Error('Retry operation failed without a specific error.')\n    this.notifyError(err)\n    throw err\n  }\n}\n"]}

package/build/src/elements/user/internals/UserAvatar.d.ts

@@ -1,9 +1,9 @@
-import { TemplateResult, LitElement } from 'lit';
+import { TemplateResult, LitElement, PropertyValues, SVGTemplateResult } from 'lit';
 import type { IUser } from '@api-client/core/models/store/User.js';
 import '@material/web/focus/md-focus-ring.js';
 import '@material/web/ripple/ripple.js';
+export type AvatarType = 'button' | 'icon';
 export default class UserAvatar extends LitElement {
-    private _user?;
     /**
      * Set with the user. The computed user initials.
      */
@@ -12,23 +12,36 @@ export default class UserAvatar extends LitElement {
      * The URL to the user picture.
      */
     protected accessor userPicture: string | undefined;
-    get user(): IUser | undefined;
     /**
+     * The user object to display the avatar for.
+     */
+    accessor user: IUser | undefined;
+    /**
+     * The type of avatar to render, either 'button' or 'icon'.
      * @attribute
      */
-    set user(value: IUser | undefined);
-    protected _processUser(user?: IUser): void;
-    protected _readUserInitials(user: IUser): string | undefined;
-    protected _pictureError(): void;
+    accessor type: AvatarType;
+    protected willUpdate(cp: PropertyValues<this>): void;
+    /**
+     * Handles changes to the user property.
+     * @param user The user object
+     */
+    protected handleUserChange(user?: IUser): void;
+    protected readUserInitials(user: IUser): string | undefined;
+    protected handlePictureError(): void;
     /**
      * @return Template result for an icon
      */
     render(): TemplateResult;
+    protected renderButton(content: TemplateResult): TemplateResult;
+    protected renderIcon(content: TemplateResult): TemplateResult;
     protected pictureTemplate(url: string): TemplateResult;
     /**
      * Renders a bubble with user initials
      * @param initials The user initials
      */
     protected nameTemplate(initials: string): TemplateResult;
+    protected renderDefaultAvatar(): TemplateResult;
+    protected defaultIcon(): SVGTemplateResult;
 }
 //# sourceMappingURL=UserAvatar.d.ts.map

package/build/src/elements/user/internals/UserAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAA;AAClE,OAAO,sCAAsC,CAAA;AAC7C,OAAO,gCAAgC,CAAA;AAEvC,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD,OAAO,CAAC,KAAK,CAAC,CAAO;IAErB;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAE5D;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAE3D,IAAI,IAAI,IAAI,KAAK,GAAG,SAAS,CAE5B;IAED;;OAEG;IACH,IACI,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,EAWhC;IAED,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI;IAU1C,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS;IAc5D,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;OAEG;IACM,MAAM,IAAI,cAAc;IAuBjC,SAAS,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc;IAWtD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc;CAGzD"}
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAO,MAAM,KAAK,CAAA;AAE9F,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAA;AAClE,OAAO,sCAAsC,CAAA;AAC7C,OAAO,gCAAgC,CAAA;AAEvC,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1C,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAE5D;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAE3D;;OAEG;IACyB,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5D;;;OAGG;IACyB,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAW;cAE7C,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO7D;;;OAGG;IACH,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI;IAU9C,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS;IAc3D,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAIpC;;OAEG;IACM,MAAM,IAAI,cAAc;IAgBjC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc;IAW/D,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc;IAI7D,SAAS,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc;IAWtD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc;IAIxD,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAI/C,SAAS,CAAC,WAAW,IAAI,iBAAiB;CAiB3C"}

package/build/src/elements/user/internals/UserAvatar.js

@@ -1,30 +1,35 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { html, LitElement } from 'lit';
+import { html, LitElement, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '@material/web/focus/md-focus-ring.js';
 import '@material/web/ripple/ripple.js';
 let UserAvatar = (() => {
     let _classSuper = LitElement;
-    let _instanceExtraInitializers = [];
     let _userInitials_decorators;
     let _userInitials_initializers = [];
     let _userInitials_extraInitializers = [];
     let _userPicture_decorators;
     let _userPicture_initializers = [];
     let _userPicture_extraInitializers = [];
-    let _set_user_decorators;
+    let _user_decorators;
+    let _user_initializers = [];
+    let _user_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
     return class UserAvatar extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _userInitials_decorators = [state()];
             _userPicture_decorators = [state()];
-            _set_user_decorators = [property({ type: Object })];
+            _user_decorators = [property({ type: Object })];
+            _type_decorators = [property({ type: String })];
             __esDecorate(this, null, _userInitials_decorators, { kind: "accessor", name: "userInitials", static: false, private: false, access: { has: obj => "userInitials" in obj, get: obj => obj.userInitials, set: (obj, value) => { obj.userInitials = value; } }, metadata: _metadata }, _userInitials_initializers, _userInitials_extraInitializers);
             __esDecorate(this, null, _userPicture_decorators, { kind: "accessor", name: "userPicture", static: false, private: false, access: { has: obj => "userPicture" in obj, get: obj => obj.userPicture, set: (obj, value) => { obj.userPicture = value; } }, metadata: _metadata }, _userPicture_initializers, _userPicture_extraInitializers);
-            __esDecorate(this, null, _set_user_decorators, { kind: "setter", name: "user", static: false, private: false, access: { has: obj => "user" in obj, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _user_decorators, { kind: "accessor", name: "user", static: false, private: false, access: { has: obj => "user" in obj, get: obj => obj.user, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, _user_initializers, _user_extraInitializers);
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        _user = __runInitializers(this, _instanceExtraInitializers);
         #userInitials_accessor_storage = __runInitializers(this, _userInitials_initializers, void 0);
         /**
          * Set with the user. The computed user initials.
@@ -37,27 +42,32 @@ let UserAvatar = (() => {
          */
         get userPicture() { return this.#userPicture_accessor_storage; }
         set userPicture(value) { this.#userPicture_accessor_storage = value; }
-        get user() {
-            return this._user;
-        }
+        #user_accessor_storage = (__runInitializers(this, _userPicture_extraInitializers), __runInitializers(this, _user_initializers, void 0));
+        /**
+         * The user object to display the avatar for.
+         */
+        get user() { return this.#user_accessor_storage; }
+        set user(value) { this.#user_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _type_initializers, 'button'));
         /**
+         * The type of avatar to render, either 'button' or 'icon'.
          * @attribute
          */
-        set user(value) {
-            const old = this._user;
-            if (old === value) {
-                return;
-            }
-            if (old && value && old.key === value.key) {
-                return;
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        willUpdate(cp) {
+            if (cp.has('user')) {
+                this.handleUserChange(this.user);
             }
-            this._user = value;
-            this.requestUpdate('user', old);
-            this._processUser(value);
+            super.willUpdate(cp);
         }
-        _processUser(user) {
+        /**
+         * Handles changes to the user property.
+         * @param user The user object
+         */
+        handleUserChange(user) {
             if (user) {
-                this.userInitials = this._readUserInitials(user);
+                this.userInitials = this.readUserInitials(user);
                 this.userPicture = user.picture && user.picture.url;
             }
             else {
@@ -65,7 +75,7 @@ let UserAvatar = (() => {
                 this.userPicture = undefined;
             }
         }
-        _readUserInitials(user) {
+        readUserInitials(user) {
             const { name } = user;
             if (!name) {
                 return undefined;
@@ -78,17 +88,14 @@ let UserAvatar = (() => {
                 .map((i) => i[0]);
             return parts.join('');
         }
-        _pictureError() {
+        handlePictureError() {
             this.userPicture = undefined;
         }
         /**
          * @return Template result for an icon
          */
         render() {
-            const { user, userPicture } = this;
-            if (!user || user.key === 'default') {
-                return html ``;
-            }
+            const { userPicture } = this;
             let content;
             if (userPicture) {
                 content = this.pictureTemplate(userPicture);
@@ -97,8 +104,14 @@ let UserAvatar = (() => {
                 content = this.nameTemplate(this.userInitials);
             }
             else {
-                content = this.nameTemplate('');
+                content = this.renderDefaultAvatar();
+            }
+            if (this.type === 'icon') {
+                return this.renderIcon(content);
             }
+            return this.renderButton(content);
+        }
+        renderButton(content) {
             return html `
       <button id="button" class="icon-button">
         <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
@@ -108,13 +121,16 @@ let UserAvatar = (() => {
       </button>
     `;
         }
+        renderIcon(content) {
+            return html `<span role="presentation" class="icon">${content}</span>`;
+        }
         pictureTemplate(url) {
             return html `
       <img
         src="${url}"
         alt="${this.userInitials || 'Thumb'}"
         class="user-picture user-icon"
-        @error="${this._pictureError}"
+        @error="${this.handlePictureError}"
       />
     `;
         }
@@ -125,9 +141,29 @@ let UserAvatar = (() => {
         nameTemplate(initials) {
             return html ` <span class="avatar-initials user-icon">${initials}</span> `;
         }
+        renderDefaultAvatar() {
+            return html `<span class="avatar-default icon"> ${this.defaultIcon()} </span>`;
+        }
+        defaultIcon() {
+            return svg `
+    <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
+      <rect width="120" height="120" rx="60" class="avatar-background" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M78.0007 48C78.0007 57.9411 69.9419 66 60.0007 66C50.0596 66 42.0007 57.9411 42.0007 48C42.0007 38.0589 50.0596 30 60.0007 30C69.9419 30 78.0007 38.0589 78.0007 48ZM72.0007 48C72.0007 54.6274 66.6282 60 60.0007 60C53.3733 60 48.0007 54.6274 48.0007 48C48.0007 41.3726 53.3733 36 60.0007 36C66.6282 36 72.0007 41.3726 72.0007 48Z"
+        class="avatar-lines"
+      />
+      <path
+        d="M60.0007 75C40.5776 75 24.0286 86.4852 17.7246 102.576C19.2603 104.101 20.878 105.543 22.5706 106.896C27.2648 92.1231 41.9909 81 60.0007 81C78.0106 81 92.7367 92.1231 97.4309 106.896C99.1235 105.544 100.741 104.101 102.277 102.576C95.973 86.4853 79.4239 75 60.0007 75Z"
+        class="avatar-lines"
+      />
+    </svg>
+    `;
+        }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _userPicture_extraInitializers);
+            __runInitializers(this, _type_extraInitializers);
         }
     };
 })();

package/build/src/elements/user/internals/UserAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport '@material/web/focus/md-focus-ring.js'\nimport '@material/web/ripple/ripple.js'\n\nexport default class UserAvatar extends LitElement {\n  private _user?: IUser\n\n  /**\n   * Set with the user. The computed user initials.\n   */\n  @state() protected accessor userInitials: string | undefined\n\n  /**\n   * The URL to the user picture.\n   */\n  @state() protected accessor userPicture: string | undefined\n\n  get user(): IUser | undefined {\n    return this._user\n  }\n\n  /**\n   * @attribute\n   */\n  @property({ type: Object })\n  set user(value: IUser | undefined) {\n    const old = this._user\n    if (old === value) {\n      return\n    }\n    if (old && value && old.key === value.key) {\n      return\n    }\n    this._user = value\n    this.requestUpdate('user', old)\n    this._processUser(value)\n  }\n\n  protected _processUser(user?: IUser): void {\n    if (user) {\n      this.userInitials = this._readUserInitials(user)\n      this.userPicture = user.picture && user.picture.url\n    } else {\n      this.userInitials = undefined\n      this.userPicture = undefined\n    }\n  }\n\n  protected _readUserInitials(user: IUser): string | undefined {\n    const { name } = user\n    if (!name) {\n      return undefined\n    }\n    const max = 2\n    const parts = name\n      .split(/[\\s-]/)\n      .slice(0, max)\n      .filter((i) => !!i)\n      .map((i) => i[0])\n    return parts.join('')\n  }\n\n  protected _pictureError(): void {\n    this.userPicture = undefined\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { user, userPicture } = this\n    if (!user || user.key === 'default') {\n      return html``\n    }\n    let content: TemplateResult\n    if (userPicture) {\n      content = this.pictureTemplate(userPicture)\n    } else if (this.userInitials) {\n      content = this.nameTemplate(this.userInitials)\n    } else {\n      content = this.nameTemplate('')\n    }\n    return html`\n      <button id=\"button\" class=\"icon-button\">\n        <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n        <md-ripple></md-ripple>\n        <span role=\"presentation\" class=\"icon\">${content}</span>\n        <span class=\"touch\"></span>\n      </button>\n    `\n  }\n\n  protected pictureTemplate(url: string): TemplateResult {\n    return html`\n      <img\n        src=\"${url}\"\n        alt=\"${this.userInitials || 'Thumb'}\"\n        class=\"user-picture user-icon\"\n        @error=\"${this._pictureError}\"\n      />\n    `\n  }\n\n  /**\n   * Renders a bubble with user initials\n   * @param initials The user initials\n   */\n  protected nameTemplate(initials: string): TemplateResult {\n    return html` <span class=\"avatar-initials user-icon\">${initials}</span> `\n  }\n}\n"]}
+{"version":3,"file":"UserAvatar.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, LitElement, PropertyValues, SVGTemplateResult, svg } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport '@material/web/focus/md-focus-ring.js'\nimport '@material/web/ripple/ripple.js'\n\nexport type AvatarType = 'button' | 'icon'\n\nexport default class UserAvatar extends LitElement {\n  /**\n   * Set with the user. The computed user initials.\n   */\n  @state() protected accessor userInitials: string | undefined\n\n  /**\n   * The URL to the user picture.\n   */\n  @state() protected accessor userPicture: string | undefined\n\n  /**\n   * The user object to display the avatar for.\n   */\n  @property({ type: Object }) accessor user: IUser | undefined\n  /**\n   * The type of avatar to render, either 'button' or 'icon'.\n   * @attribute\n   */\n  @property({ type: String }) accessor type: AvatarType = 'button'\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('user')) {\n      this.handleUserChange(this.user)\n    }\n    super.willUpdate(cp)\n  }\n\n  /**\n   * Handles changes to the user property.\n   * @param user The user object\n   */\n  protected handleUserChange(user?: IUser): void {\n    if (user) {\n      this.userInitials = this.readUserInitials(user)\n      this.userPicture = user.picture && user.picture.url\n    } else {\n      this.userInitials = undefined\n      this.userPicture = undefined\n    }\n  }\n\n  protected readUserInitials(user: IUser): string | undefined {\n    const { name } = user\n    if (!name) {\n      return undefined\n    }\n    const max = 2\n    const parts = name\n      .split(/[\\s-]/)\n      .slice(0, max)\n      .filter((i) => !!i)\n      .map((i) => i[0])\n    return parts.join('')\n  }\n\n  protected handlePictureError(): void {\n    this.userPicture = undefined\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { userPicture } = this\n    let content: TemplateResult\n    if (userPicture) {\n      content = this.pictureTemplate(userPicture)\n    } else if (this.userInitials) {\n      content = this.nameTemplate(this.userInitials)\n    } else {\n      content = this.renderDefaultAvatar()\n    }\n    if (this.type === 'icon') {\n      return this.renderIcon(content)\n    }\n    return this.renderButton(content)\n  }\n\n  protected renderButton(content: TemplateResult): TemplateResult {\n    return html`\n      <button id=\"button\" class=\"icon-button\">\n        <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n        <md-ripple></md-ripple>\n        <span role=\"presentation\" class=\"icon\">${content}</span>\n        <span class=\"touch\"></span>\n      </button>\n    `\n  }\n\n  protected renderIcon(content: TemplateResult): TemplateResult {\n    return html`<span role=\"presentation\" class=\"icon\">${content}</span>`\n  }\n\n  protected pictureTemplate(url: string): TemplateResult {\n    return html`\n      <img\n        src=\"${url}\"\n        alt=\"${this.userInitials || 'Thumb'}\"\n        class=\"user-picture user-icon\"\n        @error=\"${this.handlePictureError}\"\n      />\n    `\n  }\n\n  /**\n   * Renders a bubble with user initials\n   * @param initials The user initials\n   */\n  protected nameTemplate(initials: string): TemplateResult {\n    return html` <span class=\"avatar-initials user-icon\">${initials}</span> `\n  }\n\n  protected renderDefaultAvatar(): TemplateResult {\n    return html`<span class=\"avatar-default icon\"> ${this.defaultIcon()} </span>`\n  }\n\n  protected defaultIcon(): SVGTemplateResult {\n    return svg`\n    <svg viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\">\n      <rect width=\"120\" height=\"120\" rx=\"60\" class=\"avatar-background\" />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M78.0007 48C78.0007 57.9411 69.9419 66 60.0007 66C50.0596 66 42.0007 57.9411 42.0007 48C42.0007 38.0589 50.0596 30 60.0007 30C69.9419 30 78.0007 38.0589 78.0007 48ZM72.0007 48C72.0007 54.6274 66.6282 60 60.0007 60C53.3733 60 48.0007 54.6274 48.0007 48C48.0007 41.3726 53.3733 36 60.0007 36C66.6282 36 72.0007 41.3726 72.0007 48Z\"\n        class=\"avatar-lines\"\n      />\n      <path\n        d=\"M60.0007 75C40.5776 75 24.0286 86.4852 17.7246 102.576C19.2603 104.101 20.878 105.543 22.5706 106.896C27.2648 92.1231 41.9909 81 60.0007 81C78.0106 81 92.7367 92.1231 97.4309 106.896C99.1235 105.544 100.741 104.101 102.277 102.576C95.973 86.4853 79.4239 75 60.0007 75Z\"\n        class=\"avatar-lines\"\n      />\n    </svg>\n    `\n  }\n}\n"]}

package/build/src/elements/user/internals/UserAvatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":";AAEA,wBA6GC"}
+{"version":3,"file":"UserAvatar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":";AAEA,wBAmHC"}

package/build/src/elements/user/internals/UserAvatar.styles.js

@@ -5,8 +5,8 @@ export default css `
     outline: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     justify-content: center;
-    height: var(--_state-layer-height);
-    width: var(--_state-layer-width);
+    height: 40px;
+    width: 40px;
 
     --_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
     --_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
@@ -23,8 +23,6 @@ export default css `
     );
     --_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);
     --_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));
-    --_state-layer-height: 40px;
-    --_state-layer-width: 40px;
   }
 
   .icon-button {
@@ -88,15 +86,13 @@ export default css `
 
   .user-icon,
   .avatar-initials {
-    background-color: var(--user-avatar-initials-background-color, #0540f2);
-    color: var(--user-avatar-initials-color, #fff);
+    background-color: var(--md-sys-color-primary-container, #9eeffe);
+    color: var(--md-sys-color-on-primary-container, #001f24);
   }
 
   .avatar-initials {
-    /* border-radius: 50%; */
     text-transform: uppercase;
     font-size: large;
-    border: 1px #0d47a1 solid;
     width: 100%;
     height: 100%;
     display: flex;
@@ -104,9 +100,19 @@ export default css `
     justify-content: center;
   }
 
-  .user-icon {
-    height: var(--_state-layer-height);
-    width: var(--_state-layer-width);
+  .user-icon,
+  .icon-button,
+  .icon {
+    height: inherit;
+    width: inherit;
+  }
+
+  .avatar-background {
+    fill: var(--md-sys-color-primary-container, #9eeffe);
+  }
+
+  .avatar-lines {
+    fill: var(--md-sys-color-on-primary-container, #001f24);
   }
 `;
 //# sourceMappingURL=UserAvatar.styles.js.map

package/build/src/elements/user/internals/UserAvatar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.styles.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    justify-content: center;\n    height: var(--_state-layer-height);\n    width: var(--_state-layer-width);\n\n    --_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-state-layer-color: var(\n      --md-icon-button-hover-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);\n    --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-state-layer-color: var(\n      --md-icon-button-pressed-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);\n    --_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));\n    --_state-layer-height: 40px;\n    --_state-layer-width: 40px;\n  }\n\n  .icon-button {\n    background-color: rgba(0, 0, 0, 0);\n    color: var(--_icon-color);\n    place-items: center;\n    background: none;\n    border: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: flex;\n    place-content: center;\n    outline: none;\n    padding: 0;\n    position: relative;\n    text-decoration: none;\n    user-select: none;\n    z-index: 0;\n    flex: 1;\n    border-radius: var(--_state-layer-shape);\n    --md-ripple-hover-color: var(--_hover-state-layer-color);\n    --md-ripple-hover-opacity: var(--_hover-state-layer-opacity);\n    --md-ripple-pressed-color: var(--_pressed-state-layer-color);\n    --md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);\n  }\n\n  .icon-button:hover {\n    color: var(--_hover-icon-color);\n  }\n\n  .icon-button:focus {\n    color: var(--_focus-icon-color);\n  }\n\n  .icon-button:active {\n    color: var(--_pressed-icon-color);\n  }\n\n  md-focus-ring {\n    --md-focus-ring-shape-start-start: var(--_state-layer-shape);\n    --md-focus-ring-shape-start-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-start: var(--_state-layer-shape);\n  }\n\n  md-ripple {\n    border-radius: var(--_state-layer-shape);\n  }\n\n  .icon {\n    display: inline-flex;\n    border-radius: var(--_state-layer-shape);\n    overflow: hidden;\n  }\n\n  .touch {\n    position: absolute;\n    height: max(48px, 100%);\n    width: max(48px, 100%);\n  }\n\n  .user-icon,\n  .avatar-initials {\n    background-color: var(--user-avatar-initials-background-color, #0540f2);\n    color: var(--user-avatar-initials-color, #fff);\n  }\n\n  .avatar-initials {\n    /* border-radius: 50%; */\n    text-transform: uppercase;\n    font-size: large;\n    border: 1px #0d47a1 solid;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .user-icon {\n    height: var(--_state-layer-height);\n    width: var(--_state-layer-width);\n  }\n`\n"]}
+{"version":3,"file":"UserAvatar.styles.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    justify-content: center;\n    height: 40px;\n    width: 40px;\n\n    --_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-state-layer-color: var(\n      --md-icon-button-hover-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);\n    --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-state-layer-color: var(\n      --md-icon-button-pressed-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);\n    --_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));\n  }\n\n  .icon-button {\n    background-color: rgba(0, 0, 0, 0);\n    color: var(--_icon-color);\n    place-items: center;\n    background: none;\n    border: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: flex;\n    place-content: center;\n    outline: none;\n    padding: 0;\n    position: relative;\n    text-decoration: none;\n    user-select: none;\n    z-index: 0;\n    flex: 1;\n    border-radius: var(--_state-layer-shape);\n    --md-ripple-hover-color: var(--_hover-state-layer-color);\n    --md-ripple-hover-opacity: var(--_hover-state-layer-opacity);\n    --md-ripple-pressed-color: var(--_pressed-state-layer-color);\n    --md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);\n  }\n\n  .icon-button:hover {\n    color: var(--_hover-icon-color);\n  }\n\n  .icon-button:focus {\n    color: var(--_focus-icon-color);\n  }\n\n  .icon-button:active {\n    color: var(--_pressed-icon-color);\n  }\n\n  md-focus-ring {\n    --md-focus-ring-shape-start-start: var(--_state-layer-shape);\n    --md-focus-ring-shape-start-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-start: var(--_state-layer-shape);\n  }\n\n  md-ripple {\n    border-radius: var(--_state-layer-shape);\n  }\n\n  .icon {\n    display: inline-flex;\n    border-radius: var(--_state-layer-shape);\n    overflow: hidden;\n  }\n\n  .touch {\n    position: absolute;\n    height: max(48px, 100%);\n    width: max(48px, 100%);\n  }\n\n  .user-icon,\n  .avatar-initials {\n    background-color: var(--md-sys-color-primary-container, #9eeffe);\n    color: var(--md-sys-color-on-primary-container, #001f24);\n  }\n\n  .avatar-initials {\n    text-transform: uppercase;\n    font-size: large;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .user-icon,\n  .icon-button,\n  .icon {\n    height: inherit;\n    width: inherit;\n  }\n\n  .avatar-background {\n    fill: var(--md-sys-color-primary-container, #9eeffe);\n  }\n\n  .avatar-lines {\n    fill: var(--md-sys-color-on-primary-container, #001f24);\n  }\n`\n"]}

package/demo/elements/index.html

@@ -48,8 +48,8 @@
         <dt><a href="authorization/index.html">Authorization element</a></dt>
         <dd>Elements to define HTTP authorization.</dd>
 
-        <dt><a href="store/index.html">Net store UI</a></dt>
-        <dd>UIs related to the net-store library.</dd>
+        <dt><a href="user/user-avatar.html">User avatar</a></dt>
+        <dd>User avatar element.</dd>
       </dl>
     </nav>
   </main>

package/demo/elements/user/user-avatar.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>User Avatar</title>
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body class="demo">
+  <div id="app"></div>
+  <script type="module" src="../../../.tmp/demo/demo/elements/user/user-avatar.js"></script>
+</body>
+
+</html>

package/demo/elements/user/user-avatar.ts

@@ -0,0 +1,56 @@
+import { IUser } from '@api-client/core/models/store/User.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import { reactive } from '../../../src/decorators/index.js'
+import { UserKind } from '@api-client/core/models/kinds.js'
+import { html, TemplateResult } from 'lit'
+import '../../../src/elements/user/ui-user-avatar.js'
+
+class ComponentDemoPage extends DemoPage {
+  @reactive() accessor user1: IUser
+  @reactive() accessor user2: IUser
+
+  constructor() {
+    super()
+    this.componentName = 'User Avatar'
+    this.user1 = {
+      key: '1',
+      name: 'John Doe',
+      email: [{ email: 'john.doe  @example.com', verified: true }],
+      picture: {
+        url: 'https://i.pravatar.cc/300',
+      },
+      kind: UserKind,
+      status: 'active',
+      grantType: 'editor',
+    }
+    this.user2 = {
+      key: '2',
+      name: 'John Doe',
+      email: [{ email: 'john.doe  @example.com', verified: true }],
+      kind: UserKind,
+      status: 'active',
+      grantType: 'editor',
+    }
+  }
+
+  contentTemplate(): TemplateResult {
+    return html`
+      <a href="./">Back</a>
+      <section class="centered">
+        <h3>Full data</h3>
+        <ui-user-avatar .user="${this.user1}"></ui-user-avatar>
+        <h3>No image</h3>
+        <ui-user-avatar .user="${this.user2}"></ui-user-avatar>
+        <h3>No user</h3>
+        <ui-user-avatar></ui-user-avatar>
+        <h3>Custom size</h3>
+        <ui-user-avatar style="width: 128px; height: 128px" .user="${this.user1}"></ui-user-avatar>
+        <h3>Icon type</h3>
+        <ui-user-avatar .user="${this.user1}" type="icon"></ui-user-avatar>
+      </section>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -67,7 +67,7 @@
     "tsc:watch": "wireit",
     "tsc": "wireit",
     "gen:apis": "node demo/model.js",
-    "dev": "node --import ts-node-maintained/register/esm --enable-source-maps bin/dev.ts --watch --config=wds-demo.config.js",
+    "dev": "wireit",
     "tsc:tests": "wireit",
     "tsc:demo": "wireit"
   },
@@ -153,6 +153,25 @@
         ".tmp/tests/**",
         ".tsbuildinfo"
       ]
+    },
+    "dev": {
+      "command": "wds --watch --config=wds-demo.config.js",
+      "files": [
+        "demo/**"
+      ],
+      "service": true,
+      "dependencies": [
+        "build:ts:watch"
+      ]
+    },
+    "build:ts:watch": {
+      "command": "tsc --watch --project tsconfig.browser.json",
+      "files": [
+        "src/**",
+        "demo/**",
+        "tsconfig.browser.json"
+      ],
+      "service": true
     }
   },
   "dependencies": {

package/src/core/Model.ts

@@ -1,4 +1,58 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+
+import type { Exception } from '@api-client/core/exceptions/exception.js'
+
+/**
+ * Defines the options for the retry mechanism.
+ */
+export interface RetryOptions {
+  /**
+   * The maximum number of retry attempts.
+   * Defaults to 3.
+   */
+  retries?: number
+  /**
+   * The delay in milliseconds before the next retry.
+   * Can be a fixed number or a function that returns a number (e.g., for exponential backoff).
+   * Defaults to 1000ms.
+   */
+  delayMs?: number | ((attempt: number) => number)
+  /**
+   * An optional function that determines if a retry should be attempted based on the error.
+   * If not provided, all errors will trigger a retry up to the maximum number of retries.
+   * @param error The error that occurred.
+   * @returns True if a retry should be attempted, false otherwise.
+   */
+  shouldRetry?: (error: Error) => boolean
+}
+
+/**
+ * Calculates an exponential backoff delay for retry attempts.
+ * The delay doubles with each attempt.
+ *
+ * @param attempt The current retry attempt number (should be 1-indexed).
+ * @param initialDelay The initial delay in milliseconds. Defaults to 1000ms.
+ * @returns The calculated delay in milliseconds.
+ */
+export function exponentialBackoffDelay(attempt: number, initialDelay = 1000): number {
+  if (attempt <= 0) return initialDelay
+  // For attempt 1, delay is initialDelay * 2^0 = initialDelay
+  return initialDelay * Math.pow(2, attempt - 1)
+}
+/**
+ * Checks if the API error should be retried based on its status code.
+ * If the status code is 404, it returns false (do not retry).
+ * For other status codes, it returns true (retry).
+ * @param error The error to check.
+ */
+export function shouldRetryApiError(error: Exception): boolean {
+  const { status } = error
+  if (status === 404) {
+    // Do not retry on 404 errors
+    return false
+  }
+  return true
+}
 /**
  * The base class for models.
  *
@@ -58,6 +112,13 @@ export abstract class Model<T> extends EventTarget {
     return this.#taskComplete
   }
 
+  /**
+   * A getter for the raw value.
+   */
+  get value(): T | undefined {
+    return this.raw
+  }
+
   /**
    * @param obj The source object to use.
    */
@@ -126,4 +187,62 @@ export abstract class Model<T> extends EventTarget {
       resolver()
     }
   }
+
+  /**
+   * Executes an asynchronous operation with a retry mechanism.
+   * @param operation A function that returns a Promise to be executed.
+   * @param options Optional retry configurations.
+   * @returns A Promise that resolves with the result of the operation or rejects if all retries fail.
+   * @example
+   * ```typescript
+   * override async create(data: Partial<IUser>): Promise<IUser> {
+   *   const operation = async (): Promise<UserData> => {
+   *     // ... perform API call to create user
+   *   }
+   *   const retryOptions: RetryOptions = {
+   *     retries: 5,
+   *     delayMs: exponentialBackoffDelay,
+   *     shouldRetry: shouldRetryApiError,
+   *   }
+   *   this.raw = await this.retry(operation)
+   *   this.dispatchEvent(new CustomEvent('data-changed', { detail: this.raw }))
+   *   return this.raw;
+   * }
+   * ```
+   */
+  protected async retry<R>(operation: () => Promise<R>, options: RetryOptions = {}): Promise<R> {
+    const { retries = 3, delayMs = 1000, shouldRetry = () => true } = options
+
+    let lastError: Error | undefined
+
+    for (let attempt = 0; attempt < retries; attempt++) {
+      try {
+        return await operation()
+      } catch (e) {
+        lastError = e as Error
+        if (!shouldRetry(lastError) || attempt === retries - 1) {
+          // Do not retry if shouldRetry returns false or if it's the last attempt
+          this.notifyError(lastError)
+          throw lastError
+        }
+
+        const delay = typeof delayMs === 'function' ? delayMs(attempt + 1) : delayMs
+        if (delay > 0) {
+          await new Promise((resolve) => setTimeout(resolve, delay))
+        }
+      }
+    }
+    // This part should ideally not be reached if retries > 0,
+    // as the loop would throw on the last attempt.
+    // However, to satisfy TypeScript and guard against retries = 0:
+    if (lastError) {
+      this.notifyError(lastError)
+      throw lastError
+    }
+    // Should not happen if operation is called at least once.
+    // Adding a generic error for completeness.
+    const err = new Error('Retry operation failed without a specific error.')
+    this.notifyError(err)
+    throw err
+  }
 }

package/src/elements/user/internals/UserAvatar.styles.ts

@@ -6,8 +6,8 @@ export default css`
     outline: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     justify-content: center;
-    height: var(--_state-layer-height);
-    width: var(--_state-layer-width);
+    height: 40px;
+    width: 40px;
 
     --_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
     --_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
@@ -24,8 +24,6 @@ export default css`
     );
     --_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);
     --_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));
-    --_state-layer-height: 40px;
-    --_state-layer-width: 40px;
   }
 
   .icon-button {
@@ -89,15 +87,13 @@ export default css`
 
   .user-icon,
   .avatar-initials {
-    background-color: var(--user-avatar-initials-background-color, #0540f2);
-    color: var(--user-avatar-initials-color, #fff);
+    background-color: var(--md-sys-color-primary-container, #9eeffe);
+    color: var(--md-sys-color-on-primary-container, #001f24);
   }
 
   .avatar-initials {
-    /* border-radius: 50%; */
     text-transform: uppercase;
     font-size: large;
-    border: 1px #0d47a1 solid;
     width: 100%;
     height: 100%;
     display: flex;
@@ -105,8 +101,18 @@ export default css`
     justify-content: center;
   }
 
-  .user-icon {
-    height: var(--_state-layer-height);
-    width: var(--_state-layer-width);
+  .user-icon,
+  .icon-button,
+  .icon {
+    height: inherit;
+    width: inherit;
+  }
+
+  .avatar-background {
+    fill: var(--md-sys-color-primary-container, #9eeffe);
+  }
+
+  .avatar-lines {
+    fill: var(--md-sys-color-on-primary-container, #001f24);
   }
 `

package/src/elements/user/internals/UserAvatar.ts

@@ -1,12 +1,12 @@
-import { html, TemplateResult, LitElement } from 'lit'
+import { html, TemplateResult, LitElement, PropertyValues, SVGTemplateResult, svg } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import type { IUser } from '@api-client/core/models/store/User.js'
 import '@material/web/focus/md-focus-ring.js'
 import '@material/web/ripple/ripple.js'
 
-export default class UserAvatar extends LitElement {
-  private _user?: IUser
+export type AvatarType = 'button' | 'icon'
 
+export default class UserAvatar extends LitElement {
   /**
    * Set with the user. The computed user initials.
    */
@@ -17,30 +17,30 @@ export default class UserAvatar extends LitElement {
    */
   @state() protected accessor userPicture: string | undefined
 
-  get user(): IUser | undefined {
-    return this._user
-  }
-
   /**
+   * The user object to display the avatar for.
+   */
+  @property({ type: Object }) accessor user: IUser | undefined
+  /**
+   * The type of avatar to render, either 'button' or 'icon'.
    * @attribute
    */
-  @property({ type: Object })
-  set user(value: IUser | undefined) {
-    const old = this._user
-    if (old === value) {
-      return
-    }
-    if (old && value && old.key === value.key) {
-      return
+  @property({ type: String }) accessor type: AvatarType = 'button'
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('user')) {
+      this.handleUserChange(this.user)
     }
-    this._user = value
-    this.requestUpdate('user', old)
-    this._processUser(value)
+    super.willUpdate(cp)
   }
 
-  protected _processUser(user?: IUser): void {
+  /**
+   * Handles changes to the user property.
+   * @param user The user object
+   */
+  protected handleUserChange(user?: IUser): void {
     if (user) {
-      this.userInitials = this._readUserInitials(user)
+      this.userInitials = this.readUserInitials(user)
       this.userPicture = user.picture && user.picture.url
     } else {
       this.userInitials = undefined
@@ -48,7 +48,7 @@ export default class UserAvatar extends LitElement {
     }
   }
 
-  protected _readUserInitials(user: IUser): string | undefined {
+  protected readUserInitials(user: IUser): string | undefined {
     const { name } = user
     if (!name) {
       return undefined
@@ -62,7 +62,7 @@ export default class UserAvatar extends LitElement {
     return parts.join('')
   }
 
-  protected _pictureError(): void {
+  protected handlePictureError(): void {
     this.userPicture = undefined
   }
 
@@ -70,18 +70,22 @@ export default class UserAvatar extends LitElement {
    * @return Template result for an icon
    */
   override render(): TemplateResult {
-    const { user, userPicture } = this
-    if (!user || user.key === 'default') {
-      return html``
-    }
+    const { userPicture } = this
     let content: TemplateResult
     if (userPicture) {
       content = this.pictureTemplate(userPicture)
     } else if (this.userInitials) {
       content = this.nameTemplate(this.userInitials)
     } else {
-      content = this.nameTemplate('')
+      content = this.renderDefaultAvatar()
+    }
+    if (this.type === 'icon') {
+      return this.renderIcon(content)
     }
+    return this.renderButton(content)
+  }
+
+  protected renderButton(content: TemplateResult): TemplateResult {
     return html`
       <button id="button" class="icon-button">
         <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
@@ -92,13 +96,17 @@ export default class UserAvatar extends LitElement {
     `
   }
 
+  protected renderIcon(content: TemplateResult): TemplateResult {
+    return html`<span role="presentation" class="icon">${content}</span>`
+  }
+
   protected pictureTemplate(url: string): TemplateResult {
     return html`
       <img
         src="${url}"
         alt="${this.userInitials || 'Thumb'}"
         class="user-picture user-icon"
-        @error="${this._pictureError}"
+        @error="${this.handlePictureError}"
       />
     `
   }
@@ -110,4 +118,26 @@ export default class UserAvatar extends LitElement {
   protected nameTemplate(initials: string): TemplateResult {
     return html` <span class="avatar-initials user-icon">${initials}</span> `
   }
+
+  protected renderDefaultAvatar(): TemplateResult {
+    return html`<span class="avatar-default icon"> ${this.defaultIcon()} </span>`
+  }
+
+  protected defaultIcon(): SVGTemplateResult {
+    return svg`
+    <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
+      <rect width="120" height="120" rx="60" class="avatar-background" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M78.0007 48C78.0007 57.9411 69.9419 66 60.0007 66C50.0596 66 42.0007 57.9411 42.0007 48C42.0007 38.0589 50.0596 30 60.0007 30C69.9419 30 78.0007 38.0589 78.0007 48ZM72.0007 48C72.0007 54.6274 66.6282 60 60.0007 60C53.3733 60 48.0007 54.6274 48.0007 48C48.0007 41.3726 53.3733 36 60.0007 36C66.6282 36 72.0007 41.3726 72.0007 48Z"
+        class="avatar-lines"
+      />
+      <path
+        d="M60.0007 75C40.5776 75 24.0286 86.4852 17.7246 102.576C19.2603 104.101 20.878 105.543 22.5706 106.896C27.2648 92.1231 41.9909 81 60.0007 81C78.0106 81 92.7367 92.1231 97.4309 106.896C99.1235 105.544 100.741 104.101 102.277 102.576C95.973 86.4853 79.4239 75 60.0007 75Z"
+        class="avatar-lines"
+      />
+    </svg>
+    `
+  }
 }

package/tsconfig.browser.json

@@ -17,6 +17,7 @@
     "rootDir": "./",
     "baseUrl": ".",
     "sourceMap": true,
+    "declarationMap": true,
     "declaration": true,
     "noImplicitThis": true,
     "noImplicitAny": true,