@api-client/ui 0.2.7 → 0.2.9

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

@@ -12,6 +12,10 @@ export interface ActionButtonInit {
      * Whether the button is disabled.
      */
     disabled?: boolean;
+    /**
+     * Optional callback to be called when the button is clicked.
+     */
+    callback?: (e: MouseEvent) => void;
 }
 /**
  * A special kind of activity that renders content in a modal dialog.

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

@@ -1 +1 @@
-{"version":3,"file":"ModalActivity.d.ts","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAI7E,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,8BAAsB,aAAc,SAAQ,QAAQ;IAClD;;OAEG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAK;IACrD;;OAEG;IACM,QAAQ,CAAC,MAAM,UAAO;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IAEhB,QAAQ,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQtC,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW,CAAC,qBAAqB,CAAC,GAAG,IAAI;IASzE;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKpD;;;;OAIG;IAEH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIpD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAI5C;;;OAGG;IACH,YAAY,IAAI,cAAc;IAW9B;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc;IAc5E;;;OAGG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAK3E;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAe3E;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGrD"}
+{"version":3,"file":"ModalActivity.d.ts","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAI7E,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACnC;AAED;;;;;;;;;GASG;AACH,8BAAsB,aAAc,SAAQ,QAAQ;IAClD;;OAEG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAK;IACrD;;OAEG;IACM,QAAQ,CAAC,MAAM,UAAO;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IAEhB,QAAQ,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQtC,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW,CAAC,qBAAqB,CAAC,GAAG,IAAI;IASzE;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKpD;;;;OAIG;IAEH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIpD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAI5C;;;OAGG;IACH,YAAY,IAAI,cAAc;IAW9B;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc;IAc5E;;;OAGG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAO3E;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAgB3E;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGrD"}

package/build/src/core/ModalActivity.js

@@ -134,7 +134,9 @@ let ModalActivity = (() => {
          */
         renderNegativeButton(init = {}) {
             const { label = 'Cancel' } = init;
-            return html `<ui-text-button slot="button" type="button" value="dismiss">${label}</ui-text-button>`;
+            return html `<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
+      >${label}</ui-text-button
+    >`;
         }
         /**
          * Renders the submit button for the dialog.
@@ -153,6 +155,7 @@ let ModalActivity = (() => {
       type="${type}"
       value="confirm"
       form="${ifDefined(formId)}"
+      @click="${init.callback}"
       >${label}</ui-text-button
     >`;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ModalActivity.js","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { Activity } from './Activity.js'\nimport type { UiDialogClosingReason } from '../md/dialog/internals/Dialog.js'\nimport state from '../decorators/state.js'\nimport { IntentResult } from './ActivityManager.js'\n\nimport '../md/dialog/ui-dialog.js'\nimport '../md/button/ui-text-button.js'\n\nexport interface ActionButtonInit {\n  /**\n   * The label to use for the button.\n   */\n  label?: string\n  /**\n   * Whether the button is disabled.\n   */\n  disabled?: boolean\n}\n\n/**\n * A special kind of activity that renders content in a modal dialog.\n * When a modal activity is running the underlying activities are paused.\n *\n * A modal activity uses the UiDialogElement to render its content. The dialog\n * is inserted directly into the `<body>` element of the document and rendered\n * in the top layer. Because of that, the modal activity does not support\n * regular rendering logic. It creates its own render root that is used to render\n * the template.\n */\nexport abstract class ModalActivity extends Activity {\n  /**\n   * The list of classes to apply to the dialog.\n   */\n  protected dialogClasses: Record<string, boolean> = {}\n  /**\n   * Controls dialog visibility without controlling the activity state.\n   */\n  @state() accessor opened = true\n\n  /**\n   * The id of the form used to render the dialog.\n   */\n  protected formId?: string\n\n  override onResume(): void | Promise<void> {\n    this.renderRoot = document.createElement('div')\n    this.renderRoot.classList.add('modal-activity-container')\n    document.body.appendChild(this.renderRoot)\n    super.onResume()\n    this.requestUpdate()\n  }\n\n  override async finish(): Promise<void> {\n    if (this.renderRoot) {\n      document.body.removeChild(this.renderRoot)\n      this.renderRoot = undefined\n    }\n    await super.finish()\n  }\n\n  protected handleDialogClosed(e: CustomEvent<UiDialogClosingReason>): void {\n    const { cancelled, value } = e.detail\n    if (cancelled) {\n      this.handleNegativeAction(value)\n    } else {\n      this.handlePositiveAction(value)\n    }\n  }\n\n  /**\n   * Called when the dialog is closed with a negative action.\n   * Override this function to handle the negative action.\n   * @param value The value passed to the dialog when it is closed.\n   */\n  protected handleNegativeAction(value: unknown): void {\n    this.setResult(IntentResult.RESULT_CANCELED, value)\n    this.finish()\n  }\n\n  /**\n   * Called when the dialog is closed with a positive action.\n   * Override this function to handle the positive action.\n   * @param value The value passed to the dialog when it is closed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected handlePositiveAction(value: unknown): void {\n    this.finish()\n  }\n\n  /**\n   * Override this method to handle the form submission.\n   * @param e The submit event.\n   */\n  protected handleSubmit(e: SubmitEvent): void {\n    e.preventDefault()\n  }\n\n  /**\n   * The function called by the rendered when rendering this dialog.\n   * This way, the `render()` function is still used as the primary template provider.\n   */\n  renderDialog(): TemplateResult {\n    const classes = {\n      activityDialog: true,\n      [this.constructor.name.toLowerCase()]: true,\n      ...this.dialogClasses,\n    }\n    return html`<ui-dialog modal .open=\"${this.opened}\" class=\"${classMap(classes)}\" @close=\"${this.handleDialogClosed}\"\n      >${this.render()}</ui-dialog\n    >`\n  }\n\n  /**\n   * Used with dialogs that render forms. Override the `handleSubmit` method\n   * to handle the form submission.\n   * @param content The content to render in the form.\n   * @param name Optional form name\n   */\n  protected renderForm(content: TemplateResult, name?: string): TemplateResult {\n    if (!this.formId) {\n      this.formId = `form-${this.constructor.name.toLowerCase()}`\n    }\n    return html`<form\n      id=\"${this.formId}\"\n      name=\"${ifDefined(name)}\"\n      class=\"dialog-content\"\n      @submit=\"${this.handleSubmit}\"\n    >\n      ${content}\n    </form>`\n  }\n\n  /**\n   * Renders the cancel button for the dialog.\n   * @param label The label to use for the cancel button.\n   */\n  protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {\n    const { label = 'Cancel' } = init\n    return html`<ui-text-button slot=\"button\" type=\"button\" value=\"dismiss\">${label}</ui-text-button>`\n  }\n\n  /**\n   * Renders the submit button for the dialog.\n   * If the formId is set, the button will be a submit button.\n   * Otherwise, it will be a regular button.\n   * @param label The label to use for the submit button.\n   */\n  protected renderPositiveButton(init: ActionButtonInit = {}): TemplateResult {\n    const { label = 'OK', disabled = false } = init\n    const { formId } = this\n    const type = formId ? 'submit' : 'button'\n    // UI buttons have a proper support for form association.\n    return html`<ui-text-button\n      slot=\"button\"\n      ?disabled=\"${disabled}\"\n      type=\"${type}\"\n      value=\"confirm\"\n      form=\"${ifDefined(formId)}\"\n      >${label}</ui-text-button\n    >`\n  }\n\n  /**\n   * Renders the title for the dialog.\n   * @param title The title to render in the dialog.\n   */\n  protected renderTitle(title: string): TemplateResult {\n    return html`<span slot=\"title\">${title}</span>`\n  }\n}\n"]}
+{"version":3,"file":"ModalActivity.js","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { Activity } from './Activity.js'\nimport type { UiDialogClosingReason } from '../md/dialog/internals/Dialog.js'\nimport state from '../decorators/state.js'\nimport { IntentResult } from './ActivityManager.js'\n\nimport '../md/dialog/ui-dialog.js'\nimport '../md/button/ui-text-button.js'\n\nexport interface ActionButtonInit {\n  /**\n   * The label to use for the button.\n   */\n  label?: string\n  /**\n   * Whether the button is disabled.\n   */\n  disabled?: boolean\n  /**\n   * Optional callback to be called when the button is clicked.\n   */\n  callback?: (e: MouseEvent) => void\n}\n\n/**\n * A special kind of activity that renders content in a modal dialog.\n * When a modal activity is running the underlying activities are paused.\n *\n * A modal activity uses the UiDialogElement to render its content. The dialog\n * is inserted directly into the `<body>` element of the document and rendered\n * in the top layer. Because of that, the modal activity does not support\n * regular rendering logic. It creates its own render root that is used to render\n * the template.\n */\nexport abstract class ModalActivity extends Activity {\n  /**\n   * The list of classes to apply to the dialog.\n   */\n  protected dialogClasses: Record<string, boolean> = {}\n  /**\n   * Controls dialog visibility without controlling the activity state.\n   */\n  @state() accessor opened = true\n\n  /**\n   * The id of the form used to render the dialog.\n   */\n  protected formId?: string\n\n  override onResume(): void | Promise<void> {\n    this.renderRoot = document.createElement('div')\n    this.renderRoot.classList.add('modal-activity-container')\n    document.body.appendChild(this.renderRoot)\n    super.onResume()\n    this.requestUpdate()\n  }\n\n  override async finish(): Promise<void> {\n    if (this.renderRoot) {\n      document.body.removeChild(this.renderRoot)\n      this.renderRoot = undefined\n    }\n    await super.finish()\n  }\n\n  protected handleDialogClosed(e: CustomEvent<UiDialogClosingReason>): void {\n    const { cancelled, value } = e.detail\n    if (cancelled) {\n      this.handleNegativeAction(value)\n    } else {\n      this.handlePositiveAction(value)\n    }\n  }\n\n  /**\n   * Called when the dialog is closed with a negative action.\n   * Override this function to handle the negative action.\n   * @param value The value passed to the dialog when it is closed.\n   */\n  protected handleNegativeAction(value: unknown): void {\n    this.setResult(IntentResult.RESULT_CANCELED, value)\n    this.finish()\n  }\n\n  /**\n   * Called when the dialog is closed with a positive action.\n   * Override this function to handle the positive action.\n   * @param value The value passed to the dialog when it is closed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected handlePositiveAction(value: unknown): void {\n    this.finish()\n  }\n\n  /**\n   * Override this method to handle the form submission.\n   * @param e The submit event.\n   */\n  protected handleSubmit(e: SubmitEvent): void {\n    e.preventDefault()\n  }\n\n  /**\n   * The function called by the rendered when rendering this dialog.\n   * This way, the `render()` function is still used as the primary template provider.\n   */\n  renderDialog(): TemplateResult {\n    const classes = {\n      activityDialog: true,\n      [this.constructor.name.toLowerCase()]: true,\n      ...this.dialogClasses,\n    }\n    return html`<ui-dialog modal .open=\"${this.opened}\" class=\"${classMap(classes)}\" @close=\"${this.handleDialogClosed}\"\n      >${this.render()}</ui-dialog\n    >`\n  }\n\n  /**\n   * Used with dialogs that render forms. Override the `handleSubmit` method\n   * to handle the form submission.\n   * @param content The content to render in the form.\n   * @param name Optional form name\n   */\n  protected renderForm(content: TemplateResult, name?: string): TemplateResult {\n    if (!this.formId) {\n      this.formId = `form-${this.constructor.name.toLowerCase()}`\n    }\n    return html`<form\n      id=\"${this.formId}\"\n      name=\"${ifDefined(name)}\"\n      class=\"dialog-content\"\n      @submit=\"${this.handleSubmit}\"\n    >\n      ${content}\n    </form>`\n  }\n\n  /**\n   * Renders the cancel button for the dialog.\n   * @param label The label to use for the cancel button.\n   */\n  protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {\n    const { label = 'Cancel' } = init\n    return html`<ui-text-button slot=\"button\" type=\"button\" value=\"dismiss\" @click=\"${init.callback}\"\n      >${label}</ui-text-button\n    >`\n  }\n\n  /**\n   * Renders the submit button for the dialog.\n   * If the formId is set, the button will be a submit button.\n   * Otherwise, it will be a regular button.\n   * @param label The label to use for the submit button.\n   */\n  protected renderPositiveButton(init: ActionButtonInit = {}): TemplateResult {\n    const { label = 'OK', disabled = false } = init\n    const { formId } = this\n    const type = formId ? 'submit' : 'button'\n    // UI buttons have a proper support for form association.\n    return html`<ui-text-button\n      slot=\"button\"\n      ?disabled=\"${disabled}\"\n      type=\"${type}\"\n      value=\"confirm\"\n      form=\"${ifDefined(formId)}\"\n      @click=\"${init.callback}\"\n      >${label}</ui-text-button\n    >`\n  }\n\n  /**\n   * Renders the title for the dialog.\n   * @param title The title to render in the dialog.\n   */\n  protected renderTitle(title: string): TemplateResult {\n    return html`<span slot=\"title\">${title}</span>`\n  }\n}\n"]}

package/build/src/lib/disabled.js

@@ -25,8 +25,8 @@ export function setDisabled(target, disabled) {
         target.removeAttribute('tabindex');
         target.setAttribute('aria-disabled', 'true');
     }
-    else {
-        target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0');
+    else if (state.tabindexBeforeDisabled) {
+        target.setAttribute('tabindex', state.tabindexBeforeDisabled);
         delete state.tabindexBeforeDisabled;
         target.removeAttribute('aria-disabled');
     }

package/build/src/lib/disabled.js.map

@@ -1 +1 @@
-{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../src/lib/disabled.ts"],"names":[],"mappings":"AAKA,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA8B,CAAA;AAE1D;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAmB;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IACD,OAAO,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;AACzB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,QAA6B;IAC5E,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;IACxC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACzB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAA;QACrE,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QAClC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,sBAAsB,IAAI,GAAG,CAAC,CAAA;QACpE,OAAO,KAAK,CAAC,sBAAsB,CAAA;QACnC,MAAM,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,CAAC;IACD,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAC7B,CAAC","sourcesContent":["interface IDisabledInfo {\n  disabled?: boolean\n  tabindexBeforeDisabled?: string\n}\n\nconst elements = new WeakMap<HTMLElement, IDisabledInfo>()\n\n/**\n * A helper function to unify the way how the `disabled` state is read.\n * @param target The HTML element target.\n * @returns Whether the element is disabled\n */\nexport function isDisabled(target: HTMLElement): boolean {\n  const state = elements.get(target)\n  if (!state) {\n    return false\n  }\n  return !!state.disabled\n}\n\n/**\n * A helper function to unify the way how the `disabled` state is set.\n * Note, call `requestUpdate()` on the element to trigger the update.\n * @param target The HTML element target.\n * @param disabled Whether the element is to be set as disabled\n */\nexport function setDisabled(target: HTMLElement, disabled: boolean | undefined): void {\n  const state = elements.get(target) || {}\n  state.disabled = disabled\n  if (disabled) {\n    state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'\n    target.removeAttribute('tabindex')\n    target.setAttribute('aria-disabled', 'true')\n  } else {\n    target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0')\n    delete state.tabindexBeforeDisabled\n    target.removeAttribute('aria-disabled')\n  }\n  elements.set(target, state)\n}\n"]}
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../src/lib/disabled.ts"],"names":[],"mappings":"AAKA,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA8B,CAAA;AAE1D;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAmB;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IACD,OAAO,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;AACzB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,QAA6B;IAC5E,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;IACxC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACzB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAA;QACrE,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QAClC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC;SAAM,IAAI,KAAK,CAAC,sBAAsB,EAAE,CAAC;QACxC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAA;QAC7D,OAAO,KAAK,CAAC,sBAAsB,CAAA;QACnC,MAAM,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,CAAC;IACD,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAC7B,CAAC","sourcesContent":["interface IDisabledInfo {\n  disabled?: boolean\n  tabindexBeforeDisabled?: string\n}\n\nconst elements = new WeakMap<HTMLElement, IDisabledInfo>()\n\n/**\n * A helper function to unify the way how the `disabled` state is read.\n * @param target The HTML element target.\n * @returns Whether the element is disabled\n */\nexport function isDisabled(target: HTMLElement): boolean {\n  const state = elements.get(target)\n  if (!state) {\n    return false\n  }\n  return !!state.disabled\n}\n\n/**\n * A helper function to unify the way how the `disabled` state is set.\n * Note, call `requestUpdate()` on the element to trigger the update.\n * @param target The HTML element target.\n * @param disabled Whether the element is to be set as disabled\n */\nexport function setDisabled(target: HTMLElement, disabled: boolean | undefined): void {\n  const state = elements.get(target) || {}\n  state.disabled = disabled\n  if (disabled) {\n    state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'\n    target.removeAttribute('tabindex')\n    target.setAttribute('aria-disabled', 'true')\n  } else if (state.tabindexBeforeDisabled) {\n    target.setAttribute('tabindex', state.tabindexBeforeDisabled)\n    delete state.tabindexBeforeDisabled\n    target.removeAttribute('aria-disabled')\n  }\n  elements.set(target, state)\n}\n"]}

package/build/src/md/list/internals/ListItem.d.ts

@@ -41,6 +41,13 @@ export default class UiListItem extends UiElement {
      * @attribute
      */
     accessor image: ListItemImage;
+    /**
+     * Whether the list item is static and should not be focusable.
+     * The ripple effect will not be applied when `true`.
+     * @default false
+     * @attribute
+     */
+    accessor static: boolean;
     constructor();
     connectedCallback(): void;
     protected willUpdate(cp: PropertyValues<this>): void;

package/build/src/md/list/internals/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,2BAA2B,CAAA;AAElC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC3B,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;;IAoB/D,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOrC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOnC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAKhD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAMlD,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAMhB;;OAEG;IACH,QAAQ,IAAI,OAAO;IAInB;;OAEG;IACH,UAAU,IAAI,IAAI;IAIlB,SAAS,CAAC,gBAAgB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAiB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;IAMvC,SAAS,CAAC,SAAS,IAAI,cAAc;IAOrC,SAAS,CAAC,UAAU,IAAI,cAAc;CAUvC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,2BAA2B,CAAA;AAElC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC3B,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;;OAKG;IACyC,QAAQ,CAAC,MAAM,UAAQ;;IAoB1D,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOrC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOnC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAKhD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAMlD,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAMhB;;OAEG;IACH,QAAQ,IAAI,OAAO;IAInB;;OAEG;IACH,UAAU,IAAI,IAAI;IAIlB,SAAS,CAAC,gBAAgB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAiB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;IAMvC,SAAS,CAAC,SAAS,IAAI,cAAc;IAOrC,SAAS,CAAC,UAAU,IAAI,cAAc;CAUvC"}

package/build/src/md/list/internals/ListItem.js

@@ -34,6 +34,9 @@ let UiListItem = (() => {
     let _image_decorators;
     let _image_initializers = [];
     let _image_extraInitializers = [];
+    let _static_decorators;
+    let _static_initializers = [];
+    let _static_extraInitializers = [];
     return class UiListItem extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -41,10 +44,12 @@ let UiListItem = (() => {
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _lines_decorators = [property({ type: String, reflect: true })];
             _image_decorators = [property({ type: String, reflect: true })];
+            _static_decorators = [property({ type: Boolean, reflect: true })];
             __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _lines_decorators, { kind: "accessor", name: "lines", static: false, private: false, access: { has: obj => "lines" in obj, get: obj => obj.lines, set: (obj, value) => { obj.lines = value; } }, metadata: _metadata }, _lines_initializers, _lines_extraInitializers);
             __esDecorate(this, null, _image_decorators, { kind: "accessor", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_extraInitializers);
+            __esDecorate(this, null, _static_decorators, { kind: "accessor", name: "static", static: false, private: false, access: { has: obj => "static" in obj, get: obj => obj.static, set: (obj, value) => { obj.static = value; } }, metadata: _metadata }, _static_initializers, _static_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
@@ -79,6 +84,15 @@ let UiListItem = (() => {
          */
         get image() { return this.#image_accessor_storage; }
         set image(value) { this.#image_accessor_storage = value; }
+        #static_accessor_storage = (__runInitializers(this, _image_extraInitializers), __runInitializers(this, _static_initializers, false));
+        /**
+         * Whether the list item is static and should not be focusable.
+         * The ripple effect will not be applied when `true`.
+         * @default false
+         * @attribute
+         */
+        get static() { return this.#static_accessor_storage; }
+        set static(value) { this.#static_accessor_storage = value; }
         constructor() {
             super();
             this.lines = ListItemLines.one;
@@ -179,9 +193,9 @@ let UiListItem = (() => {
       </div>
     `;
         }
-        renderRipple = (__runInitializers(this, _image_extraInitializers), () => {
-            const { disabled } = this;
-            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        renderRipple = (__runInitializers(this, _static_extraInitializers), () => {
+            const { disabled, static: isStatic } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`;
         });
         renderStart() {
             return html `<div class="start">

package/build/src/md/list/internals/ListItem.js.map

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

package/build/src/md/list/internals/ListItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAsLC"}
+{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAuMC"}

package/build/src/md/list/internals/ListItem.styles.js

@@ -109,7 +109,16 @@ export default css `
   }
 
   :host([lines='three']) .supporting-text {
-    height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
+    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));
+  }
+
+  :host([lines='three']) .supporting-text ::slotted(*) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :host([lines='two']) .supporting-text ::slotted(*) {
@@ -181,5 +190,13 @@ export default css `
     inset: 0;
     z-index: 1;
   }
+
+  :host([static]:hover) .state {
+    background-color: var(--md-sys-color-on-surface);
+    opacity: var(--md-sys-state-hover-state-layer-opacity);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
 `;
 //# sourceMappingURL=ListItem.styles.js.map

package/build/src/md/list/internals/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([lines='two']),\n  :host([lines='one'][image='image']) {\n    height: 72px;\n  }\n\n  :host([lines='three']),\n  :host([lines='one'][image='video']) {\n    height: 88px;\n  }\n\n  .surface {\n    height: inherit;\n    position: relative;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .surface,\n  .content {\n    width: 100%;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    /* background-color: var(--md-sys-color-surface); */\n  }\n\n  .content {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding: 8px 16px 8px 16px;\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  :host([image='video']) .content {\n    /* The spec says the right padding is 24px but counting from the checkbox check border.\n      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n   */\n    padding: 12px 16px 12px 0px;\n  }\n\n  .headline {\n    color: var(--md-sys-color-on-surface);\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    /* this is to make up to the 24px right padding defined in the spec. */\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host([lines='three']) .supporting-text {\n    height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));\n  }\n\n  :host([lines='two']) .supporting-text ::slotted(*) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trailing-supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  :host(.highlight) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host(.select) .state {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n`\n"]}
+{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuMjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([lines='two']),\n  :host([lines='one'][image='image']) {\n    height: 72px;\n  }\n\n  :host([lines='three']),\n  :host([lines='one'][image='video']) {\n    height: 88px;\n  }\n\n  .surface {\n    height: inherit;\n    position: relative;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .surface,\n  .content {\n    width: 100%;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    /* background-color: var(--md-sys-color-surface); */\n  }\n\n  .content {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding: 8px 16px 8px 16px;\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  :host([image='video']) .content {\n    /* The spec says the right padding is 24px but counting from the checkbox check border.\n      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n   */\n    padding: 12px 16px 12px 0px;\n  }\n\n  .headline {\n    color: var(--md-sys-color-on-surface);\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    /* this is to make up to the 24px right padding defined in the spec. */\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host([lines='three']) .supporting-text {\n    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n  }\n\n  :host([lines='three']) .supporting-text ::slotted(*) {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([lines='two']) .supporting-text ::slotted(*) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trailing-supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  :host(.highlight) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host(.select) .state {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host([static]:hover) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n`\n"]}

package/demo/md/list/list.ts

@@ -157,6 +157,38 @@ class ComponentDemoPage extends DemoPage {
             ></ui-checkbox>
           </ui-list-item>
         </div>
+
+        <h2 class="title-large">Static (no interaction)</h2>
+
+        <div class="demo-row">
+          <ui-list-item static>Single list item</ui-list-item>
+          <ui-list-item static>
+            <span slot="start">${chatIcon}</span>
+            Single list item with an icon
+          </ui-list-item>
+          <ui-list-item image="avatar" static>
+            <span slot="start" class="avatar">PUP</span>
+            Pawel Uchida-Psztyc
+            <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
+          </ui-list-item>
+          <ui-list-item image="image" static>
+            <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
+            <p slot="end-text">100+</p>
+            Image element
+          </ui-list-item>
+
+          <ui-list-item image="video" static>
+            <span slot="start" class="video-image">
+              <img src="../chip/pawel6c9a.jpg" alt="video" />
+            </span>
+            Video image element
+            <ui-checkbox
+              slot="end"
+              @click="${EventUtils.cancelEvent}"
+              @pointerdown="${EventUtils.cancelEvent}"
+            ></ui-checkbox>
+          </ui-list-item>
+        </div>
       </section>
     `
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/core/ModalActivity.ts

@@ -18,6 +18,10 @@ export interface ActionButtonInit {
    * Whether the button is disabled.
    */
   disabled?: boolean
+  /**
+   * Optional callback to be called when the button is clicked.
+   */
+  callback?: (e: MouseEvent) => void
 }
 
 /**
@@ -139,7 +143,9 @@ export abstract class ModalActivity extends Activity {
    */
   protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {
     const { label = 'Cancel' } = init
-    return html`<ui-text-button slot="button" type="button" value="dismiss">${label}</ui-text-button>`
+    return html`<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
+      >${label}</ui-text-button
+    >`
   }
 
   /**
@@ -159,6 +165,7 @@ export abstract class ModalActivity extends Activity {
       type="${type}"
       value="confirm"
       form="${ifDefined(formId)}"
+      @click="${init.callback}"
       >${label}</ui-text-button
     >`
   }

package/src/lib/disabled.ts

@@ -31,8 +31,8 @@ export function setDisabled(target: HTMLElement, disabled: boolean | undefined):
     state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'
     target.removeAttribute('tabindex')
     target.setAttribute('aria-disabled', 'true')
-  } else {
-    target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0')
+  } else if (state.tabindexBeforeDisabled) {
+    target.setAttribute('tabindex', state.tabindexBeforeDisabled)
     delete state.tabindexBeforeDisabled
     target.removeAttribute('aria-disabled')
   }

package/src/md/list/internals/ListItem.styles.ts

@@ -110,7 +110,16 @@ export default css`
   }
 
   :host([lines='three']) .supporting-text {
-    height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
+    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));
+  }
+
+  :host([lines='three']) .supporting-text ::slotted(*) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :host([lines='two']) .supporting-text ::slotted(*) {
@@ -182,4 +191,12 @@ export default css`
     inset: 0;
     z-index: 1;
   }
+
+  :host([static]:hover) .state {
+    background-color: var(--md-sys-color-on-surface);
+    opacity: var(--md-sys-state-hover-state-layer-opacity);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
 `

package/src/md/list/internals/ListItem.ts

@@ -52,6 +52,14 @@ export default class UiListItem extends UiElement {
    */
   @property({ type: String, reflect: true }) accessor image: ListItemImage
 
+  /**
+   * Whether the list item is static and should not be focusable.
+   * The ripple effect will not be applied when `true`.
+   * @default false
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor static = false
+
   constructor() {
     super()
 
@@ -173,8 +181,8 @@ export default class UiListItem extends UiElement {
   }
 
   protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
+    const { disabled, static: isStatic } = this
+    return html`<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`
   }
 
   protected renderStart(): TemplateResult {