@api-client/ui 0.0.12 → 0.0.13

package/dist/ui/button/SegmentedButtonsSet.d.ts

@@ -1,6 +1,20 @@
 import { TemplateResult } from "lit";
 import { UiElement } from "../UiElement.js";
 import SegmentedButton from "./SegmentedButton.js";
+export interface ISegmentedButtonSelectionDetail {
+    /**
+     * A reference to the selected button.
+     */
+    button: SegmentedButton;
+    /**
+     * Whether the button is selected.
+     */
+    selected: boolean;
+    /**
+     * The index of the selected button.
+     */
+    index: number;
+}
 /**
  * @fires select - When button's selection change.
  */

package/dist/ui/button/SegmentedButtonsSet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButtonsSet.d.ts","sourceRoot":"","sources":["../../../src/ui/button/SegmentedButtonsSet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,SAAS;IACxD,QAAQ,UAAS;IAEjB;;;OAGG;IAC0B,WAAW,UAAS;IAEP,OAAO,EAAG,eAAe,EAAE,CAAC;;IAO7D,iBAAiB,IAAI,IAAI;IAKlC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAKxC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAKxC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAwBzD,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAYf,MAAM,IAAI,cAAc;CAGlC"}
+{"version":3,"file":"SegmentedButtonsSet.d.ts","sourceRoot":"","sources":["../../../src/ui/button/SegmentedButtonsSet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,+BAA+B;IAC9C;;OAEG;IACH,MAAM,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,SAAS;IACxD,QAAQ,UAAS;IAEjB;;;OAGG;IAC0B,WAAW,UAAS;IAEP,OAAO,EAAG,eAAe,EAAE,CAAC;;IAO7D,iBAAiB,IAAI,IAAI;IAKlC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAKxC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAKxC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAwBzD,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAYf,MAAM,IAAI,cAAc;CAGlC"}

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\nexport interface ISegmentedButtonSelectionDetail {\n  /**\n   * A reference to the selected button.\n   */\n  button: SegmentedButton;\n  /**\n   * Whether the button is selected.\n   */\n  selected: boolean;\n  /**\n   * The index of the selected button.\n   */\n  index: number;\n}\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<ISegmentedButtonSelectionDetail>('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/notification/SnackNotifications.d.ts

@@ -73,6 +73,7 @@ export declare class SnackNotifications {
     protected static openHandler(e: Event): void;
     protected static dismissHandler(e: Event): void;
     static cancel(snack: Snackbar): void;
+    static clear(): void;
 }
 export {};
 //# sourceMappingURL=SnackNotifications.d.ts.map

package/dist/ui/notification/SnackNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackNotifications.d.ts","sourceRoot":"","sources":["../../../src/ui/notification/SnackNotifications.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,gCAAgC,CAAC;AAExC,MAAM,WAAW,UAAU;IACzB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,kBAAkB;IAC7B,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE7C,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAEjD;;;;OAIG;IACH,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ;IAE1D;;;;OAIG;IACH,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,QAAQ;IA0C1D,SAAS,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI;IAajC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc9C,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAoB5C,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc/C,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;CAiBrC"}
+{"version":3,"file":"SnackNotifications.d.ts","sourceRoot":"","sources":["../../../src/ui/notification/SnackNotifications.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,gCAAgC,CAAC;AAExC,MAAM,WAAW,UAAU;IACzB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,kBAAkB;IAC7B,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE7C,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAM;IAEjD;;;;OAIG;IACH,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ;IAE1D;;;;OAIG;IACH,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,QAAQ;IA0C1D,SAAS,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI;IAajC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc9C,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAoB5C,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc/C,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAkBpC,MAAM,CAAC,KAAK,IAAI,IAAI;CAOrB"}

package/dist/ui/notification/SnackNotifications.js

@@ -119,5 +119,12 @@ export class SnackNotifications {
             }
         }
     }
+    static clear() {
+        this.stack = [];
+        if (this.current) {
+            this.current.element.parentElement?.removeChild(this.current.element);
+            this.current = undefined;
+        }
+    }
 }
 //# sourceMappingURL=SnackNotifications.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",

package/src/bindings/base/FileBindings.ts

@@ -1,3 +1,4 @@
+import { EventTypes } from '../../events/EventTypes.js';
 import { PlatformBindings } from './PlatformBindings.js';
 // import { EventTypes } from '../../events/EventTypes.js';
 
@@ -144,7 +145,30 @@ export interface FileWriteOptions extends ReadWriteOptions {
  */
 export abstract class FileBindings extends PlatformBindings {
   async initialize(): Promise<void> {
-    // 
+    window.addEventListener(EventTypes.Filesystem.requestSaveFile, this.handleRequestSaveFile.bind(this));
+    window.addEventListener(EventTypes.Filesystem.requestOpenFile, this.handleRequestOpenFile.bind(this));
+    window.addEventListener(EventTypes.Filesystem.writeFile, this.handleWriteFile.bind(this));
+    window.addEventListener(EventTypes.Filesystem.readFile, this.handleReadFile.bind(this));
+  }
+
+  protected handleRequestSaveFile(e: Event): void {
+    const event = e as CustomEvent<{ options?: ISaveFileDialogInit, result: Promise<ISaveFileDialogResult> }>;
+    event.detail.result = this.saveFileDialog(event.detail.options);
+  }
+
+  protected handleRequestOpenFile(e: Event): void {
+    const event = e as CustomEvent<{ options?: IOpenFileDialogInit, result: Promise<IOpenFileDialogResult> }>;
+    event.detail.result = this.openFileDialog(event.detail.options);
+  }
+
+  protected handleWriteFile(e: Event): void {
+    const event = e as CustomEvent<{ path: string, contents: BufferSource | Blob | string | Buffer, options?: FileWriteOptions, result: Promise<void> }>;
+    event.detail.result = this.writeFile(event.detail.path, event.detail.contents, event.detail.options);
+  }
+
+  protected handleReadFile(e: Event): void {
+    const event = e as CustomEvent<{ path: string, options?: FileReadOptions, result: Promise<Buffer | ArrayBuffer | string> }>;
+    event.detail.result = this.readFile(event.detail.path, event.detail.options);
   }
 
   /**

package/src/bindings/base/StoreBindings.ts

@@ -15,16 +15,11 @@ import {
   SpaceKind,
   Space,
   PermissionRole,
-  HttpCertificate,
   ContextSpaceListOptions,
   IRevision,
   TrashEntry,
   TrashEntryCreate,
   ContextDeleteBulkEvent,
-  ICertificate,
-  ContextListEvent,
-  ContextReadEvent,
-  ContextUpdateEvent,
   FileAddOptions,
   FileBreadcrumb,
   IBackendObserveCommand,
@@ -127,8 +122,6 @@ export abstract class StoreBindings extends PlatformBindings {
 
   projectExeChannel = new BroadcastChannel(StoreBroadcast.projectRuns);
 
-  certificatesChannel = new BroadcastChannel(StoreBroadcast.certificates);
-
   initialized = false;
 
   async initializeStore(): Promise<void> {
@@ -189,12 +182,6 @@ export abstract class StoreBindings extends PlatformBindings {
     target.addEventListener(EventTypes.Store.ProjectRuns.clearSpace, this.handleProjectExecutionClearSpace.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearProject, this.handleProjectExecutionClearProject.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearParent, this.handleProjectExecutionClearFolder.bind(this) as EventListener);
-
-    // certificates
-    target.addEventListener(EventTypes.Store.Certificate.list, this.handleCertificateList.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.Certificate.read, this.handleCertificateRead.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.Certificate.delete, this.handleCertificateDelete.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.Certificate.insert, this.handleCertificateInsert.bind(this) as EventListener);
   }
 
   abstract environment: EnvironmentSettings;
@@ -625,27 +612,6 @@ export abstract class StoreBindings extends PlatformBindings {
     patchUsers: (space: string, value: IAccessPatchInfo): Promise<void> => this.getStore().sdk.spaces.patchUsers(this.space || space, value),
   }
 
-  certificates = {
-    add: (value: HttpCertificate, space: string): Promise<ContextChangeRecord<HttpCertificate>> => this.getStore().sdk.certificates.add(value, this.space || space),
-    addBulk: (values: HttpCertificate[], space: string): Promise<IBulkOperationResult<ContextChangeRecord<HttpCertificate>>> => this.getStore().sdk.certificates.addBulk(values, this.space || space),
-    read: (key: string): Promise<HttpCertificate> => this.getStore().sdk.certificates.read(key),
-    list: (options?: ContextSpaceListOptions): Promise<ContextListResult<HttpCertificate>> => {
-      const cp = { ...options } as ContextSpaceListOptions;
-      if (!cp.space) {
-        cp.space = this.space;
-      }
-      return this.getStore().sdk.certificates.list(cp);
-    },
-    delete: async (key: string): Promise<ContextDeleteRecord> => {
-      await this.getStore().sdk.certificates.delete(key);
-      return {
-        key,
-      };
-    },
-    deleteBulk: (keys: string[]): Promise<IBulkOperationResult<ContextDeleteRecord>> => this.getStore().sdk.certificates.deleteBulk(keys),
-    empty: (space: string): Promise<void> => this.getStore().sdk.certificates.empty(this.space || space),
-  }
-
   trash = {
     add: (entry: TrashEntryCreate, space: string): Promise<ContextChangeRecord<TrashEntry>> => this.getStore().sdk.trash.add(entry, this.space || space),
     list: (options: ContextSpaceListOptions): Promise<ContextListResult<TrashEntry>> => {
@@ -694,43 +660,7 @@ export abstract class StoreBindings extends PlatformBindings {
     me: (): Promise<IUser> => this.getStore().sdk.user.me(),
     read: (key: string): Promise<IUser> => this.getStore().sdk.user.read(key),
   }
-
-  protected handleCertificateList(event: Event): void {
-    const e = event as ContextListEvent<ICertificate>;
-    e.preventDefault();
-    const options: ContextSpaceListOptions = {
-      ...e.detail,
-      space: this.space,
-    }
-    e.detail.result = this.certificates.list(options);
-  }
-
-  protected handleCertificateRead(event: Event): void {
-    const e = event as ContextReadEvent<ICertificate>;
-    e.preventDefault();
-    e.detail.result = this.certificates.read(e.detail.key);
-  }
-
-  protected handleCertificateDelete(event: Event): void {
-    const e = event as ContextDeleteEvent;
-    e.preventDefault();
-    e.detail.result = this.certificates.delete(e.detail.key);
-  }
-
-  protected handleCertificateInsert(event: Event): void {
-    const e = event as ContextUpdateEvent<HttpCertificate, HttpCertificate>;
-    e.preventDefault();
-    e.detail.result = this.certificates.add(e.detail.item, this.space);
-  }
-
-  async observeCertificates(): Promise<void> {
-    await this.observePath(RouteBuilder.certificates());
-  }
-
-  async unobserveCertificates(): Promise<void> {
-    await this.unobservePath(RouteBuilder.certificates());
-  }
-
+  
   async observeSpaces(): Promise<void> {
     await this.observePath(RouteBuilder.spaces());
   }
@@ -860,8 +790,6 @@ export abstract class StoreBindings extends PlatformBindings {
       this.historyChannel.postMessage(event);
     } else if (event.path === RouteBuilder.projectExecutions()) {
       this.projectExeChannel.postMessage(event);
-    } else if (event.path === RouteBuilder.certificates()) {
-      this.certificatesChannel.postMessage(event);
     } else {
       // eslint-disable-next-line no-console
       console.warn(`Broadcast path not handled`, event.path, event)

package/src/bindings/web/WebFileBindings.ts

@@ -46,7 +46,7 @@ export class WebFileBindings extends FileBindings {
       const handles = await window.showOpenFilePicker(dialogOptions);
       const result: string[] = [];
       handles.forEach((handle) => {
-        const path = uuidV4();
+        const path = `${uuidV4()}/${handle.name}`;
         result.push(path);
         this.handles.set(path, handle);
       });

package/src/define/http/certificate-add.ts

@@ -0,0 +1,12 @@
+import { customElement } from 'lit/decorators.js';
+import Element from '../../elements/http/CertificateAdd.element.js';
+
+@customElement('certificate-add')
+export class CertificateAddElement extends Element {
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'certificate-add': Element;
+  }
+}

package/src/define/ui/ui-segmented-button-set.ts

@@ -9,6 +9,6 @@ export class UiSegmentedButtonSetElement extends Element {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'ui-segmented-button-set': UiSegmentedButtonSetElement;
+    'ui-segmented-button-set': Element;
   }
 }

package/src/elements/authorization/ui/CC.styles.ts

@@ -1,19 +1,14 @@
 import { css } from 'lit';
 
 export default css`
-.cert-meta {
-  display: inline-flex;
-  align-items: center;
-}
-
 :host {
-  max-height: 300px;
   display: flex;
   flex-direction: column;
 }
 
-form {
-  overflow: auto;
-  flex: 1;
+.certificate-info {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
 }
 `;

package/src/elements/authorization/ui/CcAuthorization.ts

@@ -1,129 +1,69 @@
 import { html, nothing, TemplateResult } from "lit";
-import { state } from "lit/decorators.js";
 import {
-  ICCAuthorization, HttpCertificate, Events as CoreEvents,
-  ICertificate,
-  BroadcastEvent,
-  BroadcastCreatedEvent,
-  DeletedBroadcastEvent,
+  ICCAuthorization, HttpCertificate, Events as CoreEvents, CertificateFileKind, ICertificate, IFile,
 } from '@api-client/core/build/browser.js';
-import '@github/relative-time-element';
+import { state } from "lit/decorators.js";
 import { Authorization } from "./Authorization.js";
+import type { FilePickerClosingReason } from "../../store/FilePicker.element.js";
 import { Events } from "../../../events/Events.js";
-import type RadioElement from "../../../ui/input/RadioElement.js";
-import { StoreBroadcast } from "../../../http-client/store/StoreBroadcast.js";
+import '../../../define/ui/ui-dropdown-list.js';
 import '../../../define/ui/ui-button.js';
-import '../../../define/ui/ui-radio.js';
+import '../../../define/ui/ui-icon-button.js';
+import '../../../define/ui/ui-icon.js';
+import '../../../define/store/file-picker.js';
 
 export default class CcAuthorization extends Authorization {
-  @state() items?: ICertificate[];
-
-  @state() querying = false;
-
-  @state() loadingError?: string;
-
-  channel = new BroadcastChannel(StoreBroadcast.certificates);
-
-  constructor() {
-    super();
-
-    this.handleBroadcast = this.handleBroadcast.bind(this);
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.channel.addEventListener('message', this.handleBroadcast);
-    this.queryCertificates();
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.channel.removeEventListener('message', this.handleBroadcast);
-  }
-
-  protected handleBroadcast(e: MessageEvent): void {
-    const event = e.data as BroadcastEvent;
-    switch (event.operation) {
-      case 'created': this.handleCreated(event as BroadcastCreatedEvent); break;
-      case 'deleted': this.handleDeleted(event as DeletedBroadcastEvent); break;
-      default:
-    }
-  }
+  @state() selectorRendered = false;
 
-  protected handleCreated(event: BroadcastCreatedEvent): void {
-    const cert = event.data as ICertificate;
-    if (!this.items) {
-      this.items = [];
+  get config(): ICCAuthorization {
+    const { authorization } = this;
+    if (!authorization) {
+      return { };
     }
-    const index = this.items.findIndex(i => i.key === cert.key);
-    if (index >= 0) {
-      this.items[index] = cert;
-    } else {
-      this.items.push(cert);
+    if (!authorization.config) {
+      authorization.config = {} as ICCAuthorization;
     }
-    this.requestUpdate();
+    return authorization.config as ICCAuthorization;
   }
 
-  protected handleDeleted(event: DeletedBroadcastEvent): void {
-    if (!this.items) {
+  protected handleClose(e: CustomEvent<FilePickerClosingReason>): void {
+    const { canceled, file } = e.detail;
+    if (canceled) {
       return;
     }
-    const { key } = event;
-    const index = this.items.findIndex(i => i.key === key);
-    if (index >= 0) {
-      this.items.splice(index, 1);
-      this.requestUpdate();
-    }
+    this.setCertificate((file as IFile).key);
+    CoreEvents.Telemetry.event({
+      category: 'Certificates',
+      action: 'Authorization',
+      label: 'selected-certificate'
+    }, this);
   }
 
-  protected async queryCertificates(): Promise<void> {
-    if (this.querying) {
-      return;
-    }
-    this.querying = true;
+  async setCertificate(key: string): Promise<void> {
+    let result: unknown;
     try {
-      const data = await Events.HttpClient.Model.Certificate.list({ limit: 100, space: "" }); // the space should be filled by the bindings / hosting app
-      if (!data) {
-        this.items = undefined;
-        throw new Error(`Certificates query not handled by the store.`);
-        return;
-      }
-      this.items = data.items;
-    } catch (cause) {
-      this.loadingError = (cause as Error).message;
-    } finally {
-      this.querying = false;
+      result = await Events.Store.File.read(key, true, this);
+    } catch (_) {
+      return;
     }
+    const { config } = this;
+    config.certificate = result as ICertificate;
+    this.requestUpdate();
+    this.notifyChange();
   }
 
-  protected handleSelected(e: Event): void {
-    const { authorization } = this;
-    if (!authorization) {
-      return;
+  protected handleDropDownOpen(): void {
+    this.selectorRendered = true;
+    if (this.isUpdatePending) {
+      this.scheduleUpdate();
     }
+  }
 
-    const radio = e.target as RadioElement;
-    const { checked, value } = radio;
-    if (!checked) {
-      return;
-    }
-    const config = authorization.config as ICCAuthorization || {} as ICCAuthorization;
-    if (value === '') {
-      delete config.certificate;
-    } else {
-      const cert = this.items?.find(i => i.key === value);
-      if (!cert) {
-        return;
-      }
-      config.certificate = cert;
-    }
+  protected handleClearCertificate(): void {
+    const { config } = this;
+    delete config.certificate;
+    this.requestUpdate();
     this.notifyChange();
-
-    CoreEvents.Telemetry.event({
-      category: 'Certificates',
-      action: 'Authorization',
-      label: 'selected-certificate'
-    }, this);
   }
 
   override render(): TemplateResult {
@@ -134,81 +74,41 @@ export default class CcAuthorization extends Authorization {
   }
 
   protected renderEditor(): TemplateResult | typeof nothing {
-    const { authorization, loadingError, items } = this;
-    if (!authorization) {
-      return nothing;
-    }
-    const hasItems = !!items && !!items.length;
-    if (!loadingError && !hasItems) {
-      return html`
-      ${this.renderEmptyState()}
-      `;
-    }
-    const config = authorization.config as ICCAuthorization || {} as ICCAuthorization;
+    const { config } = this;
+    const { certificate } = config;
+    // Note, the <form> element is required by the Authorization class for validation.
     return html`
-    ${loadingError ? this.renderErrorState(loadingError) : ''}
-    ${hasItems ? html`
-    <form autocomplete="on" class="auth-form basic-auth">
-      ${this.renderList(items, config.certificate)}
-    </form>
-    ` : ''}
+    <form autocomplete="on" class="auth-form cc-auth"></form>
+    ${this.renderSelector()}
+    ${certificate ? this.renderSelection(certificate) : nothing}
     `;
   }
 
-  protected renderErrorState(error: string): TemplateResult {
-    return html`<p class="error-message">Unable to load certificates: ${error}.</p>`;
-  }
-
-  protected renderEmptyState(): TemplateResult {
-    return html`<p class="empty-screen body-large">There are no certificates installed in this application.</p>`;
-  }
-
-  protected renderList(items: HttpCertificate[], current?: ICertificate): TemplateResult {
-    const currentKey = current && current.key;
+  protected renderSelector(): TemplateResult {
+    const { selectorRendered } = this;
+    const kinds: typeof CertificateFileKind[] = [CertificateFileKind];
     return html`
-      ${this.renderNoneItem(currentKey)}
-      ${items.map((item) => this.renderCertItem(item, currentKey))}
-    `;
-  }
-
-  protected renderNoneItem(selectedKey?: string): TemplateResult {
-    return html`
-    <label class="label-medium">
-      <ui-radio name="certificate" value="" .checked="${!selectedKey}" @change="${this.handleSelected}"></ui-radio>
-      None
-    </label>
-    `;
-  }
-
-  /**
-   * @param item The item to render
-   * @returns The template for the dropdown item.
-   */
-  protected renderCertItem(item: HttpCertificate, selectedKey?: string): TemplateResult {
-    return html`
-    <div class="cert-item">
-      <label>
-        <ui-radio name="certificate" value="${item.key}" .checked="${item.key === selectedKey}" @change="${this.handleSelected}"></ui-radio>
-        <div class="cert-meta">
-          <span class="label-medium">${item.name}</span>
-          <span class="body-small">Added: ${this.renderDateTime(item.created)}</span>
-        </div>
-      </label>
+    <div class="selector">
+      <ui-dropdown-list @open="${this.handleDropDownOpen}">
+        <ui-button class="dropdown-trigger" type="tonal">Select a certificate</ui-button>
+        ${selectorRendered ? html`<file-picker slot="dropdown" .kinds="${kinds}" @close="${this.handleClose}"></file-picker>` : nothing}
+      </ui-dropdown-list>
     </div>
     `;
   }
 
-  /**
-   * @param created The certificate created time.
-   * @returns The template for the cert time element.
-   */
-  protected renderDateTime(created?: number): TemplateResult {
-    if (!created) {
-      return html`<span>Unknown</span>`;
-    }
-    const d = new Date(created);
+  protected renderSelection(certificate: HttpCertificate): TemplateResult {
     return html`
-    <relative-time datetime="${d.toISOString()}"></relative-time>
+    <div class="certificate-info body-medium">
+      Current certificate: ${certificate.name}
+      <ui-icon-button 
+        aria-label="Remove certificate from authorization" 
+        title="Remove certificate from authorization"
+        @click="${this.handleClearCertificate}"
+      >
+        <ui-icon role="presentation" icon="deleteOutline"></ui-icon>
+      </ui-icon-button>
+    </div>
     `;
   }
 }