@justeattakeaway/pie-list 0.4.0 → 0.5.0

package/dist/index-BMp2PPeH.js

@@ -1,307 +0,0 @@
-import { unsafeCSS as f, isServer as x, html as p, nothing as b } 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 I, ariaContext as T, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
-import { P as w } from "./PieElement-CGtUo9tK.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 = (n, r) => {
-      this.unsubscribe && (this.unsubscribe !== r && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = n, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(n, r)), this.unsubscribe = r;
-    }, this.host = t, e.context !== void 0) {
-      const n = e;
-      this.context = n.context, this.callback = n.callback, this.subscribe = n.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 A {
-  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 L extends Event {
-  constructor(t, e) {
-    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
-  }
-}
-class P extends A {
-  constructor(t, e, o) {
-    var s, n;
-    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (r) => {
-      if (r.context !== this.context) return;
-      const h = r.contextTarget ?? r.composedPath()[0];
-      h !== this.host && (r.stopPropagation(), this.addCallback(r.callback, h, r.subscribe));
-    }, this.onProviderRequest = (r) => {
-      if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
-      const h = /* @__PURE__ */ new Set();
-      for (const [u, { consumerHost: m }] of this.subscriptions) h.has(u) || (h.add(u), m.dispatchEvent(new g(this.context, m, u, !0)));
-      r.stopPropagation();
-    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (n = (s = this.host).addController) == null || n.call(s, this);
-  }
-  attachListeners() {
-    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
-  }
-  hostConnected() {
-    this.host.dispatchEvent(new L(this.context, this.host));
-  }
-}
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function R({ 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: (n) => {
-        s[o] = n;
-      }, subscribe: t });
-    }));
-  };
-}
-const S = ["none", "radio", "checkbox", "switch", "link"], d = {
-  isCompact: !1,
-  isBold: !1,
-  hasMedia: !1,
-  interactionType: "none",
-  disabled: !1
-}, D = "*,*: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-link{position:relative}.c-listItem-container.is-selectable:not(.is-disabled),.c-listItem-container.is-link{--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),.c-listItem-container.is-link{--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),.c-listItem-container.is-link{cursor:pointer}.c-listItem-container.is-selectable:not(.is-disabled):hover,.c-listItem-container.is-link:hover{background-color:var(--list-item-hover-bg);--interactive-container-tint: var(--list-item-hover-bg)}.c-listItem-container.is-selectable:not(.is-disabled):active,.c-listItem-container.is-link:active{background-color:var(--list-item-active-bg);--interactive-container-tint: var(--list-item-active-bg)}slot[name=link]::slotted(a){position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}slot[name=link]::slotted(a:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.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, z = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
-  for (var s = o > 1 ? void 0 : o ? z(t, e) : t, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (s = (o ? r(t, e, s) : r(s)) || s);
-  return o && s && q(t, e, s), s;
-};
-const B = "pie-list-item";
-let a = class extends w {
-  constructor() {
-    super(...arguments), this.isCompact = d.isCompact, this.isBold = d.isBold, this.hasMedia = d.hasMedia, this.interactionType = d.interactionType, this.disabled = d.disabled, this._parentDisabled = !1, this._ariaProvider = x ? void 0 : new P(this, { context: T }), this._managedRole = null, this._linkAriaCaptured = !1, this._consumerNamedLink = !1, this._consumerDescribedLink = !1, this._handleHostClick = (i) => {
-      if (!this._isSelectable || this._isDisabled) return;
-      const t = this._control;
-      !t || i.composedPath().includes(t) || (t.click(), t.focus());
-    };
-  }
-  // A selection row hosts a slotted control (radio/checkbox/switch) and makes the whole row a
-  // toggle target. `link` is interactive too, but it is a navigation target rather than a
-  // selection control, so it is deliberately excluded here.
-  get _isSelectable() {
-    return this.interactionType === "radio" || this.interactionType === "checkbox" || this.interactionType === "switch";
-  }
-  get _isLinkRow() {
-    return this.interactionType === "link";
-  }
-  // True when the item lends its text to a slotted control as that control's accessible
-  // name/description: selectable rows (radio/checkbox/switch) and link rows (the slotted anchor).
-  get _providesAria() {
-    return this._isSelectable || this._isLinkRow;
-  }
-  // 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.interactionType === "radio" || this.interactionType === "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._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), this._applyLinkAria();
-  }
-  /**
-   * Sets the item's role from `interactionType`: `presentation` for radio/checkbox (so the group
-   * owns those controls directly), otherwise `listitem` (static items, switches and links). A role
-   * set explicitly by the consumer is left untouched, even if it is added or removed dynamically
-   * after the element connects.
-   */
-  _applyRole() {
-    const i = this.getAttribute("role");
-    if (i !== null && i !== this._managedRole) return;
-    const t = this._ownedByGroup ? "presentation" : "listitem";
-    this._managedRole = t, this.setAttribute("role", t);
-  }
-  /**
-   * 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._providesAria) return;
-    const i = [this.secondaryText, this.metaText].filter(Boolean).join(". ");
-    return { label: this.primaryText, description: i || void 0 };
-  }
-  /**
-   * When the item is a link, names the slotted (empty) anchor from the item's own text: the parent
-   * owns the child's aria. The anchor is plain light-DOM, so it cannot reference the shadow-DOM text
-   * via `aria-labelledby`; and it is not a PIE control that consumes `ariaContext`, so we set the
-   * attributes imperatively. The visible text is `aria-hidden` in the template, so nothing is
-   * announced twice.
-   *
-   * A consumer-provided name/description always wins: we capture (once) whether the anchor already
-   * carries `aria-label`/`aria-labelledby` or `aria-description`/`aria-describedby` and, if so,
-   * leave that attribute untouched. Otherwise we keep our generated value in sync with the text.
-   */
-  _applyLinkAria() {
-    if (!this._isLinkRow) {
-      if (this._linkAriaCaptured) {
-        const e = this.querySelector('a[slot="link"]');
-        e && (this._consumerNamedLink || e.removeAttribute("aria-label"), this._consumerDescribedLink || e.removeAttribute("aria-description")), this._linkAriaCaptured = !1, this._consumerNamedLink = !1, this._consumerDescribedLink = !1;
-      }
-      return;
-    }
-    const i = this.querySelector('a[slot="link"]');
-    if (!i) return;
-    this._linkAriaCaptured || (this._consumerNamedLink = i.hasAttribute("aria-label") || i.hasAttribute("aria-labelledby"), this._consumerDescribedLink = i.hasAttribute("aria-description") || i.hasAttribute("aria-describedby"), this._linkAriaCaptured = !0);
-    const t = this._providedAria;
-    this._consumerNamedLink || (t != null && t.label ? i.setAttribute("aria-label", t.label) : i.removeAttribute("aria-label")), this._consumerDescribedLink || (t != null && t.description ? i.setAttribute("aria-description", t.description) : i.removeAttribute("aria-description"));
-  }
-  _renderSecondaryText() {
-    const { secondaryText: i } = this;
-    return i ? p`<span class="c-listItem-secondaryText">${i}</span>` : b;
-  }
-  // 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._providesAria ? "true" : b}>${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-link": this._isLinkRow,
-      "is-disabled": this._isDisabled
-    };
-    return p`
-        <div class=${k(t)}>
-            ${this._isLinkRow ? p`<slot name="link"></slot>` : b}
-            <div class="c-listItem-leading">
-                <slot name="leading"></slot>
-            </div>
-
-            <div class="c-listItem-text" aria-hidden=${this._providesAria ? "true" : b}>
-                <span class="c-listItem-primaryText">${i}</span>
-                ${this._renderSecondaryText()}
-            </div>
-
-            ${this._renderTrailingContent()}
-        </div>`;
-  }
-};
-a.styles = f(D);
-l([
-  c({ type: String })
-], a.prototype, "primaryText", 2);
-l([
-  c({ type: String })
-], a.prototype, "secondaryText", 2);
-l([
-  c({ type: String })
-], a.prototype, "metaText", 2);
-l([
-  c({ type: Boolean })
-], a.prototype, "isCompact", 2);
-l([
-  c({ type: Boolean })
-], a.prototype, "isBold", 2);
-l([
-  c({ type: Boolean })
-], a.prototype, "hasMedia", 2);
-l([
-  c({ type: String }),
-  _(B, S, d.interactionType)
-], a.prototype, "interactionType", 2);
-l([
-  c({ type: Boolean })
-], a.prototype, "disabled", 2);
-l([
-  R({ context: C, subscribe: !0 }),
-  y()
-], a.prototype, "_parentDisabled", 2);
-a = l([
-  I("pie-list-item")
-], a);
-export {
-  a as P,
-  d,
-  S as i
-};