@justeattakeaway/pie-list 0.3.0 → 0.5.0

package/dist/index-mqipXuiX.js

@@ -1,265 +0,0 @@
-import { unsafeCSS as x, isServer as f, html as p, nothing as m } from "lit";
-import { property as c, state as y } from "lit/decorators.js";
-import { classMap as k } from "lit/directives/class-map.js";
-import { validPropertyValues as _, safeCustomElement as T, ariaContext as I, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
-import { P as w } from "./PieElement-ab_PEQpW.js";
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-let g = class extends Event {
-  constructor(t, e, o, s) {
-    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e, this.callback = o, this.subscribe = s ?? !1;
-  }
-};
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-let v = class {
-  constructor(t, e, o, s) {
-    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (r, a) => {
-      this.unsubscribe && (this.unsubscribe !== a && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = r, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(r, a)), this.unsubscribe = a;
-    }, this.host = t, e.context !== void 0) {
-      const r = e;
-      this.context = r.context, this.callback = r.callback, this.subscribe = r.subscribe ?? !1;
-    } else this.context = e, this.callback = o, this.subscribe = s ?? !1;
-    this.host.addController(this);
-  }
-  hostConnected() {
-    this.dispatchRequest();
-  }
-  hostDisconnected() {
-    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
-  }
-  dispatchRequest() {
-    this.host.dispatchEvent(new g(this.context, this.host, this.t, this.subscribe));
-  }
-};
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class P {
-  get value() {
-    return this.o;
-  }
-  set value(t) {
-    this.setValue(t);
-  }
-  setValue(t, e = !1) {
-    const o = e || !Object.is(t, this.o);
-    this.o = t, o && this.updateObservers();
-  }
-  constructor(t) {
-    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
-      for (const [e, { disposer: o }] of this.subscriptions) e(this.o, o);
-    }, t !== void 0 && (this.value = t);
-  }
-  addCallback(t, e, o) {
-    if (!o) return void t(this.value);
-    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
-      this.subscriptions.delete(t);
-    }, consumerHost: e });
-    const { disposer: s } = this.subscriptions.get(t);
-    t(this.value, s);
-  }
-  clearCallbacks() {
-    this.subscriptions.clear();
-  }
-}
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class S extends Event {
-  constructor(t, e) {
-    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
-  }
-}
-class E extends P {
-  constructor(t, e, o) {
-    var s, r;
-    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (a) => {
-      if (a.context !== this.context) return;
-      const h = a.contextTarget ?? a.composedPath()[0];
-      h !== this.host && (a.stopPropagation(), this.addCallback(a.callback, h, a.subscribe));
-    }, this.onProviderRequest = (a) => {
-      if (a.context !== this.context || (a.contextTarget ?? a.composedPath()[0]) === this.host) return;
-      const h = /* @__PURE__ */ new Set();
-      for (const [b, { consumerHost: u }] of this.subscriptions) h.has(b) || (h.add(b), u.dispatchEvent(new g(this.context, u, b, !0)));
-      a.stopPropagation();
-    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (r = (s = this.host).addController) == null || r.call(s, this);
-  }
-  attachListeners() {
-    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
-  }
-  hostConnected() {
-    this.host.dispatchEvent(new S(this.context, this.host));
-  }
-}
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function B({ context: i, subscribe: t }) {
-  return (e, o) => {
-    typeof o == "object" ? o.addInitializer((function() {
-      new v(this, { context: i, callback: (s) => {
-        e.set.call(this, s);
-      }, subscribe: t });
-    })) : e.constructor.addInitializer(((s) => {
-      new v(s, { context: i, callback: (r) => {
-        s[o] = r;
-      }, subscribe: t });
-    }));
-  };
-}
-const z = ["none", "radio", "checkbox", "switch"], d = {
-  isCompact: !1,
-  isBold: !1,
-  hasMedia: !1,
-  selectionType: "none",
-  disabled: !1
-}, R = "*,*:after,*:before{box-sizing:inherit}:host{--list-item-inline-padding: var(--dt-spacing-d);--list-item-alignment: flex-start;--list-item-border: none;display:block}.c-listItem-container{--list-item-block-padding: var(--dt-spacing-d);--list-item-block-end-padding: calc(var(--list-item-block-padding) - var(--list-item-size-modifier));padding-inline-start:var(--list-item-inline-padding);padding-inline-end:var(--list-item-inline-padding);padding-block-start:var(--list-item-block-padding);padding-block-end:var(--list-item-block-end-padding, var(--list-item-block-padding));display:flex;align-items:var(--list-item-alignment);gap:var(--dt-spacing-c);min-height:56px;border-bottom:var(--list-item-border)}.c-listItem-container:has(.c-listItem-secondaryText){align-items:var(--list-item-alignment);min-height:76px}.c-listItem-container.is-compact{--list-item-block-padding: var(--dt-spacing-c);--list-item-alignment: center;align-items:var(--list-item-alignment);min-height:48px}.c-listItem-container.is-selectable:not(.is-disabled){--list-item-hover-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));--list-item-active-bg: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-listItem-container.is-selectable:not(.is-disabled){--list-item-hover-bg: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);--list-item-active-bg: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-listItem-container.is-selectable:not(.is-disabled){cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover{background-color:var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active{background-color:var(--list-item-active-bg)}.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child){--list-item-block-padding: var(--dt-spacing-b)}.c-listItem-text{flex:1}slot[name=trailing]::slotted(*),.c-listItem-metaText{padding-inline-start:var(--dt-spacing-a)}.c-listItem-leading,slot[name=leading],.c-listItem-trailing,slot[name=trailing]{display:contents}.c-listItem-text>*{display:block}.c-listItem-trailing{margin-inline-start:auto}.c-listItem-metaText{display:block;max-width:33.3333333333%}::slotted(.c-pieIcon){--icon-size-override: 24px }.c-listItem-primaryText{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-line-height) * 1px);color:var(--dt-color-content-default)}.c-listItem-container.is-bold .c-listItem-primaryText{font-family:var(--dt-font-body-strong-l-family);font-weight:var(--dt-font-body-strong-l-weight);font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px)}.c-listItem-secondaryText,.c-listItem-metaText{font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);color:var(--dt-color-content-subdued)}";
-var q = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
-  for (var s = o > 1 ? void 0 : o ? D(t, e) : t, r = i.length - 1, a; r >= 0; r--)
-    (a = i[r]) && (s = (o ? a(t, e, s) : a(s)) || s);
-  return o && s && q(t, e, s), s;
-};
-const $ = "pie-list-item";
-let n = class extends w {
-  constructor() {
-    super(...arguments), this.isCompact = d.isCompact, this.isBold = d.isBold, this.hasMedia = d.hasMedia, this.selectionType = d.selectionType, this.disabled = d.disabled, this._parentDisabled = !1, this._ariaProvider = f ? void 0 : new E(this, { context: I }), this._hasExplicitRole = !1, this._handleHostClick = (i) => {
-      if (!this._isSelectable || this._isDisabled) return;
-      const t = this._control;
-      !t || i.composedPath().includes(t) || (t.click(), t.focus());
-    };
-  }
-  get _isSelectable() {
-    return this.selectionType !== "none";
-  }
-  // radio/checkbox are owned by a selection group, which is why the item becomes `presentation`
-  // (so the group owns the controls directly) and the radio is named on its host. A switch has
-  // no group, so the item stays a `listitem`.
-  get _ownedByGroup() {
-    return this.selectionType === "radio" || this.selectionType === "checkbox";
-  }
-  // True when the row should be treated as disabled: either its own `disabled` prop is set, or the
-  // containing group is disabled (provided via context). Declarative and reactive, so the styling
-  // and row-click guard react without observing the slotted control.
-  get _isDisabled() {
-    return this.disabled || this._parentDisabled;
-  }
-  // The interactive control (radio/checkbox/switch) slotted into this item, if any. Used only by
-  // the client-side row-click handler.
-  get _control() {
-    return this.querySelector("pie-radio, pie-checkbox, pie-switch");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._hasExplicitRole = this.hasAttribute("role"), this._abortController = new AbortController(), this.addEventListener("click", this._handleHostClick, { signal: this._abortController.signal });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._abortController.abort();
-  }
-  updated() {
-    var i;
-    this._applyRole(), (i = this._ariaProvider) == null || i.setValue(this._providedAria);
-  }
-  /**
-   * Sets the item's role from `selectionType`: `presentation` for radio/checkbox (so the group
-   * owns those controls directly), otherwise `listitem` (static items and switches). A role set
-   * explicitly by the consumer is left untouched.
-   */
-  _applyRole() {
-    this._hasExplicitRole || this.setAttribute("role", this._ownedByGroup ? "presentation" : "listitem");
-  }
-  /**
-   * The accessible name and description this item provides to its slotted control, stitched from
-   * its text. Only provided in a selectable list. Each control consumes this via `ariaContext`
-   * and decides how to apply it: `pie-radio` names its host (which carries `role="radio"`),
-   * while `pie-checkbox` / `pie-switch` name their internal input (their host is role-less, so
-   * `aria-label` there would be invalid). Context reaches across the shadow boundary that
-   * `aria-labelledby` cannot.
-   */
-  get _providedAria() {
-    if (!this._isSelectable) return;
-    const i = [this.secondaryText, this.metaText].filter(Boolean).join(". ");
-    return { label: this.primaryText, description: i || void 0 };
-  }
-  _renderSecondaryText() {
-    const { secondaryText: i } = this;
-    return i ? p`<span class="c-listItem-secondaryText">${i}</span>` : m;
-  }
-  // metaText is another form of trailing content. The component can only ever display either slotted trailing content or the metaText string
-  _renderTrailingContent() {
-    const { metaText: i } = this;
-    return i ? p`<span class="c-listItem-metaText c-listItem-trailing" aria-hidden=${this._isSelectable ? "true" : m}>${i}</span>` : p`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
-  }
-  render() {
-    const { primaryText: i } = this, t = {
-      "c-listItem-container": !0,
-      "is-compact": this.isCompact,
-      "is-bold": this.isBold,
-      "has-media": this.hasMedia,
-      "is-selectable": this._isSelectable,
-      "is-disabled": this._isDisabled
-    };
-    return p`
-        <div class=${k(t)}>
-            <div class="c-listItem-leading">
-                <slot name="leading"></slot>
-            </div>
-
-            <div class="c-listItem-text" aria-hidden=${this._isSelectable ? "true" : m}>
-                <span class="c-listItem-primaryText">${i}</span>
-                ${this._renderSecondaryText()}
-            </div>
-
-            ${this._renderTrailingContent()}
-        </div>`;
-  }
-};
-n.styles = x(R);
-l([
-  c({ type: String })
-], n.prototype, "primaryText", 2);
-l([
-  c({ type: String })
-], n.prototype, "secondaryText", 2);
-l([
-  c({ type: String })
-], n.prototype, "metaText", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "isCompact", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "isBold", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "hasMedia", 2);
-l([
-  c({ type: String }),
-  _($, z, d.selectionType)
-], n.prototype, "selectionType", 2);
-l([
-  c({ type: Boolean })
-], n.prototype, "disabled", 2);
-l([
-  B({ context: C, subscribe: !0 }),
-  y()
-], n.prototype, "_parentDisabled", 2);
-n = l([
-  T("pie-list-item")
-], n);
-export {
-  n as P,
-  d,
-  z as s
-};