@ed.yakovich/component-library 0.0.1

package/dist/prism-card.entry-DQ6P4TZP.js

@@ -0,0 +1,119 @@
+import { r as b, e as n, h as e, F as h, H as g, g as p } from "./index-C9Rf5U9q.js";
+import { g as w, m as u } from "./index-e6818ded-r_t6ryaW.js";
+/*!
+ * Copyright (c) 2025 Comcast. Prism UI - v7.32.2 - made with ❤️ in Philadelphia
+ */
+const v = '.prism-box{border-color:rgb(var(--border-color-stroke-neutral-base)/var(--tw-border-opacity));border-radius:var(--border-radius-small,4px);border-style:solid;border-width:1px;padding:1rem}:host{--card-content-padding:1rem;--prism-card-border-width:1px;display:block;height:100%;margin-bottom:var(--card-spacing-top,.75rem);margin-top:var(--card-spacing-top,.75rem);max-width:var(--card-width);position:relative;width:100%}.card{--tw-border-opacity:var(--border-opacity-tertiary,0.15);border-color:rgb(var(--border-color-stroke-neutral-base)/var(--tw-border-opacity));border-radius:var(--border-radius-small,4px);border-style:solid;border-width:1px;box-sizing:border-box;height:100%;padding:1rem;padding:var(--card-content-padding);position:relative;transition:all .15s ease-in-out}.center{text-align:center}.left{text-align:left}.right{text-align:right}.card.eyebrow{padding:0 0 1rem}.card.eyebrow .eyebrow-cell{align-items:center;border-top-left-radius:var(--border-radius-small,4px);border-top-right-radius:var(--border-radius-small,4px);display:flex;justify-content:center;margin-bottom:1rem;padding:1rem 1.5rem}.card.eyebrow .eyebrow-cell .title-right{margin-right:.5rem}.card.eyebrow .eyebrow-cell .title-left{margin-left:.5rem}.card.eyebrow .content,.card.eyebrow .image{padding-left:var(--card-content-padding);padding-right:var(--card-content-padding)}.card.neutral{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-neutral-base-shadow);background-color:rgb(var(--background-color-material-neutral-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-neutral-base)/var(--tw-border-opacity))}.card.neutral.selected,.card.neutral2.selected{--tw-border-opacity:1;border-color:rgb(var(--border-color-stroke-theme1-base)/var(--tw-border-opacity))}.card.high.neutral.selected,.card.high.neutral2.selected{--tw-border-opacity:1;border-color:rgb(var(--border-color-stroke-theme1-focus)/var(--tw-border-opacity))}.card.neutral2{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-neutral2-base-shadow);background-color:rgb(var(--background-color-material-neutral2-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-neutral2-base)/var(--tw-border-opacity))}.card.info{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-info-base-shadow);background-color:rgb(var(--background-color-material-info-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-info-base)/var(--tw-border-opacity))}.card.high.info{--tw-border-opacity:1;--tw-bg-opacity:1;--shadow-color:var(--fill-info-base-shadow);background-color:rgb(var(--background-color-fill-info-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-info-focus)/var(--tw-border-opacity))}.card.caution{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-caution-base-shadow);background-color:rgb(var(--background-color-material-caution-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-caution-base)/var(--tw-border-opacity))}.card.high.caution{--tw-border-opacity:1;--tw-bg-opacity:1;--shadow-color:var(--fill-caution-base-shadow);background-color:rgb(var(--background-color-fill-caution-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-caution-focus)/var(--tw-border-opacity))}.card.negative{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-negative-base-shadow);background-color:rgb(var(--background-color-material-negative-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-negative-base)/var(--tw-border-opacity))}.card.high.negative{--tw-border-opacity:1;--tw-bg-opacity:1;--shadow-color:var(--fill-negative-base-shadow);background-color:rgb(var(--background-color-fill-negative-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-negative-focus)/var(--tw-border-opacity))}.card.positive{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-positive-base-shadow);background-color:rgb(var(--background-color-material-positive-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-positive-base)/var(--tw-border-opacity))}.card.high.positive{--tw-border-opacity:1;--tw-bg-opacity:1;--shadow-color:var(--fill-positive-base-shadow);background-color:rgb(var(--background-color-fill-positive-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-positive-focus)/var(--tw-border-opacity))}.card.theme1{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-theme1-base-shadow);background-color:rgb(var(--background-color-material-theme1-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-theme1-base)/var(--tw-border-opacity))}.card.theme2{--tw-border-opacity:1;--tw-border-opacity:var(--border-opacity-tertiary,0.15);--tw-bg-opacity:1;--shadow-color:var(--material-theme2-base-shadow);background-color:rgb(var(--background-color-material-theme2-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-theme2-base)/var(--tw-border-opacity))}.card.high.theme1{--tw-border-opacity:1;--tw-bg-opacity:1;--shadow-color:var(--fill-theme1-base-shadow);background-color:rgb(var(--background-color-fill-theme1-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-theme1-focus)/var(--tw-border-opacity))}.card.high.theme2{--tw-border-opacity:1;--tw-bg-opacity:1;--shadow-color:var(--fill-theme2-base-shadow);background-color:rgb(var(--background-color-fill-theme2-base)/var(--tw-bg-opacity));border-color:rgb(var(--border-color-stroke-theme2-focus)/var(--tw-border-opacity))}.card.high{--tw-text-opacity:1;color:rgb(var(--text-color-inverse-base)/var(--tw-text-opacity))}.card.neutral.high{--tw-bg-opacity:1;--shadow-color:var(--fill-neutral-base-shadow);background-color:rgb(var(--background-color-fill-neutral-base)/var(--tw-bg-opacity))}.card.neutral2.high{--tw-bg-opacity:1;background-color:rgb(var(--background-color-fill-neutral2-base)/var(--tw-bg-opacity))}.eyebrow-tone.info{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-info-base-shadow);background-color:rgb(var(--background-color-fill-info-base)/var(--tw-bg-opacity))}.eyebrow-tone.info,.eyebrow-tone.positive{color:rgb(var(--text-color-inverse-base)/var(--tw-text-opacity))}.eyebrow-tone.positive{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-positive-base-shadow);background-color:rgb(var(--background-color-fill-positive-base)/var(--tw-bg-opacity))}.eyebrow-tone.caution{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-caution-base-shadow);background-color:rgb(var(--background-color-fill-caution-base)/var(--tw-bg-opacity))}.eyebrow-tone.caution,.eyebrow-tone.negative{color:rgb(var(--text-color-inverse-base)/var(--tw-text-opacity))}.eyebrow-tone.negative{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-negative-base-shadow);background-color:rgb(var(--background-color-fill-negative-base)/var(--tw-bg-opacity))}.eyebrow-tone.neutral{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-neutral-base-shadow);background-color:rgb(var(--background-color-fill-neutral-base)/var(--tw-bg-opacity))}.eyebrow-tone.neutral,.eyebrow-tone.theme1{color:rgb(var(--text-color-inverse-base)/var(--tw-text-opacity))}.eyebrow-tone.theme1{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-theme1-base-shadow);background-color:rgb(var(--background-color-fill-theme1-base)/var(--tw-bg-opacity))}.eyebrow-tone.theme2{--tw-bg-opacity:1;--tw-text-opacity:1;--shadow-color:var(--fill-theme2-base-shadow);background-color:rgb(var(--background-color-fill-theme2-base)/var(--tw-bg-opacity))}.eyebrow-tone.expressive,.eyebrow-tone.theme2{color:rgb(var(--text-color-inverse-base)/var(--tw-text-opacity))}.eyebrow-tone.expressive{--tw-text-opacity:1;background-image:var(--background-image-gradient-expressive,linear-gradient(90deg,#28156b,#7b30ff))}.selected{--tw-shadow:0px 16px 16px -8px var(--shadow-color);--tw-shadow-colored:0px 16px 16px -8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card.selected{--tw-border-opacity:var(--border-opacity-primary,1);border-width:2px;margin:-1px}.selected-icon{position:absolute;right:-.75rem;top:-.75rem}.selected.high .selected-icon{border-radius:2.5rem;outline-style:solid;outline-width:2px}.selected.high.neutral .selected-icon,.selected.high.neutral2 .selected-icon,.selected.high.theme1 .selected-icon{outline-color:var(--outline-color-theme1-focus,#3d1881)}.selected.high.caution .selected-icon{outline-color:var(--outline-color-caution-focus,#a33800)}.selected.high.positive .selected-icon{outline-color:var(--outline-color-positive-focus,#005240)}.selected.high.negative .selected-icon{outline-color:var(--outline-color-negative-focus,#8f002f)}.selected.high.info .selected-icon{outline-color:var(--outline-color-info-focus,#0040a3)}@media (prefers-reduced-motion:reduce){.card{transition:none}}.horizontal,.horizontal-reverse,.mixed,.mixed-reverse,.stacked{display:flex}.horizontal,.mixed{flex-direction:row}.horizontal,.horizontal-reverse,.mixed,.mixed-reverse{align-items:center;-moz-column-gap:1rem;column-gap:1rem;justify-content:space-around}.horizontal-reverse,.mixed-reverse{flex-direction:row-reverse}.stacked{flex-direction:column;row-gap:1rem}@media (min-width:640px){.mixed,.mixed-reverse{-moz-column-gap:0;column-gap:0;flex-direction:column;row-gap:1rem}.mixed .image,.mixed-reverse .image{align-self:auto;justify-self:auto}}.clickable:has(.link:focus-visible){outline-color:var(--outline-color-neutral-focus,#35353b);outline-offset:2px;outline-style:solid;outline-width:1px}.clickable:not(.disabled):not(.selected):hover{--tw-shadow:0px 16px 16px -8px var(--shadow-color);--tw-shadow-colored:0px 16px 16px -8px var(--tw-shadow-color)}.clickable.selected:not(.disabled):hover,.clickable:not(.disabled):not(.selected):hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.clickable.selected:not(.disabled):hover{--tw-shadow:0px 24px 24px -8px var(--shadow-color);--tw-shadow-colored:0px 24px 24px -8px var(--tw-shadow-color)}.link:not([disabled]){cursor:pointer}.link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color-transparent,transparent);border-style:none;color:inherit;display:block;font:inherit;height:100%;outline:2px solid transparent;outline-offset:2px;padding:0;text-decoration-line:none;width:100%}.link,.link:after{transition:all .2s ease}.link:after{inset:0;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0}footer{margin-top:1.5rem}::slotted(img){border-radius:var(--border-radius-small,4px);margin:auto}.screen-reader-text{height:1px;margin:-1px;width:1px}', y = v, m = class {
+  constructor(a) {
+    b(this, a), this.prismClick = n(this, "prismClick", 7), this.prismFocus = n(this, "prismFocus", 7), this.prismBlur = n(this, "prismBlur", 7), this.uid = w(), this.slots = {
+      image: !1,
+      actions: !1,
+      eyebrow: {
+        leading: !1,
+        trailing: !1
+      }
+    }, this._attributes = {}, this.interactiveAttrs = {
+      id: `${this.prismId}-${this.display}`,
+      onBlur: (t) => this.onBlur(t),
+      onFocus: (t) => this.onFocus(t),
+      class: { "screen-reader-text": !this.heading, link: !0 },
+      part: "native",
+      disabled: this.disabled,
+      "aria-labelledby": this.heading ? null : this.prismId
+    }, this._toggleClick = (t) => {
+      this.selected = !this.selected, this.onClick(t);
+    }, this.onClick = (t) => {
+      let { currentTarget: r } = t, { id: o } = r;
+      this.prismClick.emit({ id: o, selected: this.selected, target: r }).defaultPrevented && t.preventDefault();
+    }, this.onFocus = (t) => {
+      let { currentTarget: r } = t, { id: o } = r;
+      this.prismFocus.emit({ id: o, selected: this.selected, target: r });
+    }, this.onBlur = (t) => {
+      let { currentTarget: r } = t, { id: o } = r;
+      this.prismBlur.emit({ id: o, selected: this.selected, target: r });
+    }, this.prismId = `prism-card-${this.uid}`, this.display = "static", this.anchorAttr = void 0, this.buttonAttr = { type: "button" }, this.tone = "neutral", this.priority = "low", this.selected = !1, this.button = !1, this.type = "button", this.disabled = !1, this.download = void 0, this.href = void 0, this.rel = void 0, this.target = void 0, this.align = "center", this.shadow = !1, this.heading = void 0, this.eyebrow = void 0, this.eyebrowTone = "neutral", this.layout = "stacked", this.headingDisplay = "heading1", this.headingTag = "h2", this.eyebrowTag = "p";
+  }
+  /** @method
+   * Sets focus on the native `button` or `a`
+   */
+  async setFocus() {
+    this.nativeElement && this.nativeElement.focus();
+  }
+  connectedCallback() {
+    this.slots.image = !!this.el.querySelector('[slot="image"]'), this.slots.actions = !!this.el.querySelector('[slot="actions"]'), this.slots.eyebrow.leading = !!this.el.querySelector('[slot="eyebrow-asset-leading"]'), this.slots.eyebrow.trailing = !!this.el.querySelector('[slot="eyebrow-asset-trailing"]'), u("prism-card");
+  }
+  hasInteraction() {
+    return this.href !== void 0 && this.href !== "" || this.display !== "static" || this.button;
+  }
+  /** Card Contents */
+  renderCardContent(a) {
+    const t = this.slots.actions && !this.hasInteraction();
+    return e("section", { id: this.prismId, part: "inner", class: {
+      disabled: this.disabled,
+      [this.tone]: !0,
+      card: !0,
+      eyebrow: !!this.eyebrow,
+      selected: this.selected,
+      shadow: this.shadow,
+      [this.priority]: !0,
+      clickable: this.hasInteraction()
+    } }, this.selected && e("prism-icon", { size: "xs", contained: !0, containedPriority: this.priority === "high" ? "low" : "high", containedTone: this.tone === "neutral" || this.tone === "neutral2" ? "theme1" : this.tone, tone: this.priority === "high" ? this.tone === "neutral" || this.tone === "neutral2" ? "theme1" : this.tone : "neutral-inverse", theme: "fill", class: "selected-icon", name: "check" }), this.eyebrow && e("section", { ref: (r) => this.eyebrowElement = r, class: { "eyebrow-cell": !0, "eyebrow-tone": !0, [this.eyebrowTone]: !0 } }, e("slot", { name: "eyebrow-asset-leading" }), e("prism-text", { tag: this.eyebrowTag, class: { "title-right": this.slots.eyebrow.trailing, "title-left": this.slots.eyebrow.leading }, display: "button2" }, this.eyebrow), e("slot", { name: "eyebrow-asset-trailing" })), e("section", { class: { [this.layout]: !0, [this.align]: !0 } }, this.slots.image && e("section", { class: "image" }, e("slot", { name: "image" })), e("section", { class: "content" }, this.heading ? e("prism-text", { tag: this.headingTag, class: "heading", display: this.headingDisplay }, a ? (
+      // eslint-disable-next-line react/jsx-no-bind
+      e(a, Object.assign({ ref: (r) => this.nativeElement = r }, this._attributes, this.interactiveAttrs), this.heading)
+    ) : this.heading) : a ? e(
+      a,
+      Object.assign({
+        // eslint-disable-next-line react/jsx-no-bind
+        ref: (r) => this.nativeElement = r
+      }, this._attributes, this.interactiveAttrs)
+    ) : null, e("slot", null), t && e("footer", null, e("slot", { name: "actions" })))));
+  }
+  toggleSelection() {
+  }
+  renderCard() {
+    if (!this.hasInteraction())
+      return [this.renderCardContent()];
+    const r = (() => {
+      var o, s, c, l;
+      let d = this.display;
+      switch (this.button && (d = "button"), this.href && (d = "anchor"), d) {
+        case "anchor":
+          return this._attributes = {
+            onClick: (i) => this.onClick(i),
+            download: ((o = this.anchorAttr) === null || o === void 0 ? void 0 : o.download) || this.download,
+            href: this.href,
+            rel: ((s = this.anchorAttr) === null || s === void 0 ? void 0 : s.rel) || this.rel,
+            target: ((c = this.anchorAttr) === null || c === void 0 ? void 0 : c.target) || this.target
+          }, "a";
+        case "button":
+          return this._attributes = { onClick: (i) => this.onClick(i), type: ((l = this.buttonAttr) === null || l === void 0 ? void 0 : l.type) || this.type }, "button";
+        case "toggle":
+          return this._attributes = {
+            onClick: (i) => this._toggleClick(i),
+            type: "button",
+            "aria-pressed": this.selected.toString()
+          }, "button";
+        default:
+          return;
+      }
+    })();
+    return e(h, null, this.renderCardContent(r));
+  }
+  render() {
+    return e(g, { key: "c27625fc0fb6f9dc2d3af774ceaea2527836012a", class: {
+      disabled: this.disabled
+    } }, this.renderCard());
+  }
+  get el() {
+    return p(this);
+  }
+  static get watchers() {
+    return {
+      selected: ["toggleSelection"]
+    };
+  }
+};
+m.style = y;
+export {
+  m as prism_card
+};