@m3e/web 2.4.0 → 2.5.0

package/dist/list.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
-import { ReconnectedCallback, AttachInternals, Role, ResizeController, setCustomState, computeLineCount, DesignToken, customElement, LinkButton, KeyboardClick, Focusable, Disabled, FocusController, PressedController, HoverController, renderPseudoLink, Selected, getTextContent, Labelled, Dirty, Touched, FormAssociated, formValue } from '@m3e/web/core';
+import { ReconnectedCallback, AttachInternals, Role, ResizeController, setCustomState, computeLineCount, DesignToken, customElement, KeyboardClick, LinkButton, Focusable, Disabled, FocusController, PressedController, HoverController, renderPseudoLink, Selected, getTextContent, Labelled, Dirty, Touched, FormAssociated, formValue } from '@m3e/web/core';
 import { selectionManager, RovingTabIndexManager, SelectionManager } from '@m3e/web/core/a11y';
 import { LitElement, html, unsafeCSS, css } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -643,6 +643,40 @@ _M3eActionListElement_keyDownHandler = new WeakMap();
 _a$1 = selectionManager;
 M3eActionListElement = __decorate([customElement("m3e-action-list")], M3eActionListElement);
 
+/**
+ * @internal
+ * An internal interactive element used to present the content of a list item.
+ */
+let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardClick(LinkButton(Focusable(Disabled(AttachInternals(Role(M3eListItemElement, "button"), true))))) {
+  constructor() {
+    super();
+    new FocusController(this, {
+      callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
+    });
+    new PressedController(this, {
+      callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
+    });
+    new HoverController(this, {
+      callback: hovering => this.shadowRoot?.querySelector(".base")?.classList.toggle("hover", hovering)
+    });
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    [this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[renderPseudoLink]()} ${super._renderBase()}</div>`;
+  }
+};
+/** The styles of the element. */
+M3eListItemButtonElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } :host(:not(:disabled)) { cursor: pointer; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } slot[name="trailing"] { align-self: var(--_list-item-button-trailing-align-self, auto); }`];
+__decorate([query(".focus-ring")], M3eListItemButtonElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eListItemButtonElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eListItemButtonElement.prototype, "_ripple", void 0);
+M3eListItemButtonElement = __decorate([customElement("m3e-list-item-button")], M3eListItemButtonElement);
+
 var _M3eListActionElement_instances, _M3eListActionElement_handleClick;
 /**
  * An item in a list that performs an action.
@@ -724,7 +758,7 @@ var _M3eListActionElement_instances, _M3eListActionElement_handleClick;
  * @cssprop --m3e-list-item-three-line-top-offset - Top offset for media in three line items.
  * @cssprop --m3e-list-item-disabled-media-opacity - Opacity for media when disabled.
  */
-let M3eListActionElement = class M3eListActionElement extends LinkButton(M3eListItemElement) {
+let M3eListActionElement = class M3eListActionElement extends LinkButton(M3eListItemElement, true) {
   constructor() {
     super(...arguments);
     _M3eListActionElement_instances.add(this);
@@ -766,40 +800,6 @@ __decorate([property({
 })], M3eListActionElement.prototype, "disabled", void 0);
 M3eListActionElement = __decorate([customElement("m3e-list-action")], M3eListActionElement);
 
-/**
- * @internal
- * An internal interactive element used to present the content of a list item.
- */
-let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardClick(LinkButton(Focusable(Disabled(AttachInternals(Role(M3eListItemElement, "button"), true))))) {
-  constructor() {
-    super();
-    new FocusController(this, {
-      callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
-    });
-    new PressedController(this, {
-      callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
-    });
-    new HoverController(this, {
-      callback: hovering => this.shadowRoot?.querySelector(".base")?.classList.toggle("hover", hovering)
-    });
-  }
-  /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    [this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
-  }
-  /** @inheritdoc */
-  render() {
-    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[renderPseudoLink]()} ${super._renderBase()}</div>`;
-  }
-};
-/** The styles of the element. */
-M3eListItemButtonElement.styles = [M3eListItemElement.styles, css`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } :host(:not(:disabled)) { cursor: pointer; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } slot[name="trailing"] { align-self: var(--_list-item-button-trailing-align-self, auto); }`];
-__decorate([query(".focus-ring")], M3eListItemButtonElement.prototype, "_focusRing", void 0);
-__decorate([query(".state-layer")], M3eListItemButtonElement.prototype, "_stateLayer", void 0);
-__decorate([query(".ripple")], M3eListItemButtonElement.prototype, "_ripple", void 0);
-M3eListItemButtonElement = __decorate([customElement("m3e-list-item-button")], M3eListItemButtonElement);
-
 var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOptionElement_textContent, _M3eListOptionElement_clickHandler, _M3eListOptionElement_handleSlotChange, _M3eListOptionElement_handleClick;
 /**
  * A selectable option in a list.
@@ -1136,5 +1136,5 @@ __decorate([property({
 })], M3eSelectionListElement.prototype, "hideSelectionIndicator", void 0);
 M3eSelectionListElement = __decorate([customElement("m3e-selection-list")], M3eSelectionListElement);
 
-export { M3eActionListElement, M3eExpandableListItemElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eSelectionListElement };
+export { M3eActionListElement, M3eExpandableListItemElement, M3eListActionElement, M3eListElement, M3eListItemElement, M3eListOptionElement, M3eSelectionListElement };
 //# sourceMappingURL=list.js.map