@ed.yakovich/component-library 0.0.13 → 0.0.15

package/dist/prism-card.entry-DaxGD-uX.js

@@ -0,0 +1,152 @@
+import { r as p, c as l, h as r, F as m, H as b, g as h } from "./index-D9BZSjMp.js";
+import { g, m as v } from "./index-44540db3-BN5vFHKr.js";
+/*!
+ * Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
+ */
+const u = ':host{display:block;height:auto;margin:var(--prism-card-spacing-margin,var(--prism-spacer-size-md) auto);max-width:var(--prism-card-max-width,100%);position:relative;width:100%}.card{background-color:var(--prism-card-background-color,var(--prism-color-material-primary-base));border:var(--prism-card-border-width,1px) solid color-mix(in srgb,var(--prism-card-border-color,var(--prism-color-border-primary-base)) var(--prism-card-border-alpha-percentage,var(--prism-alpha-tertiary-percentage)),transparent);border-radius:var(--prism-radius-size-md);border-width:var(--prism-card-border-width,1px);box-sizing:border-box;color:var(--prism-card-text-color,var(--prism-color-text-primary-base));height:100%;isolation:isolate;overflow:hidden;padding:var(--prism-card-spacing-padding,var(--prism-spacer-size-lg));position:relative;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.center{text-align:center}.left{text-align:left}.right{text-align:right}.card.eyebrow{padding:0 0 var(--prism-spacer-size-lg) 0}.card.eyebrow .eyebrow-cell{align-items:center;-moz-column-gap:var(--prism-spacer-size-md);column-gap:var(--prism-spacer-size-md);display:flex;justify-content:var(--prism-card-eyebrow-justify-content,center);margin:0 0 var(--prism-spacer-size-lg) 0;padding:var(--prism-spacer-size-lg) var(--prism-spacer-size-xxl)}.card.eyebrow .content,.card.eyebrow .image{padding:0 var(--prism-card-spacing-padding) var(--prism-spacer-size-lg) var(--prism-card-spacing-padding)}.stroke-tone-info{--prism-icon-color-border-contained:var(--prism-color-border-info-base)}.stroke-tone-success{--prism-icon-color-border-contained:var(--prism-color-border-success-base)}.stroke-tone-caution{--prism-icon-color-border-contained:var(--prism-color-border-caution-base)}.stroke-tone-danger{--prism-icon-color-border-contained:var(--prism-color-border-danger-base)}.stroke-tone-primary{--prism-icon-color-border-contained:var(--prism-color-border-primary-base)}.stroke-tone-primary-inverse,.stroke-tone-secondary-inverse{--prism-icon-color-border-contained:var(--prism-color-border-primary-inverse-base)}.stroke-tone-secondary{--prism-icon-color-border-contained:var(--prism-color-border-secondary-base)}.stroke-tone-primary-brand{--prism-icon-color-border-contained:var(--prism-color-border-brand-primary-base)}.stroke-tone-secondary-brand{--prism-icon-color-border-contained:var(--prism-color-border-brand-secondary-base)}.stroke-tone-expressive-brand-linear,.stroke-tone-linear-accent-100,.stroke-tone-linear-accent-200,.stroke-tone-linear-accent-300,.stroke-tone-linear-accent-400,.stroke-tone-linear-accent-500,.stroke-tone-linear-accent-600{--prism-icon-color-border-contained:var(--prism-color-border-brand-primary-base)}.card.primary{--prism-card-border-color:var(--prism-color-border-primary-base);--prism-card-background-color:var(--prism-color-material-primary-base);--prism-icon-color-border-contained:var(--prism-color-border-brand-primary-base)}.card.primary-inverse,.card.secondary-inverse{--prism-card-border-color:var(--prism-color-border-primary-inverse-base);--prism-card-background-color:var(--prism-color-material-primary-inverse-base);--prism-card-text-color:var(--prism-color-text-primary-inverse-base);--prism-icon-color-border-contained:var(--prism-color-border-brand-primary-base)}.card.primary.selected,.card.secondary.selected{--prism-card-border-color:var(--prism-color-border-brand-primary-base);--prism-icon-color-border-contained:var(--prism-color-border-brand-primary-base)}.card.high.primary.selected,.card.high.secondary.selected{--prism-card-border-color:var(--prism-color-border-brand-primary-focus)}.card.secondary{--prism-card-border-color:var(--prism-color-border-secondary-base);--prism-card-background-color:var(--prism-color-material-secondary-base)}.card.info{--prism-card-border-color:var(--prism-color-border-info-base);--prism-card-background-color:var(--prism-color-material-info-base)}.card.high.info{--prism-card-border-color:var(--prism-color-border-info-focus);--prism-icon-color-border-contained:var(--prism-color-border-info-base);--prism-card-background-color:var(--prism-color-fill-info-base)}.card.caution{--prism-card-border-color:var(--prism-color-border-caution-base);--prism-card-background-color:var(--prism-color-material-caution-base)}.card.high.caution{--prism-card-border-color:var(--prism-color-border-caution-focus);--prism-card-background-color:var(--prism-color-fill-caution-base)}.card.danger{--prism-card-border-color:var(--prism-color-border-danger-base);--prism-card-background-color:var(--prism-color-material-danger-base)}.card.high.danger{--prism-card-border-color:var(--prism-color-border-danger-focus);--prism-card-background-color:var(--prism-color-fill-danger-base)}.card.success{--prism-card-border-color:var(--prism-color-border-success-base);--prism-card-background-color:var(--prism-color-material-success-base)}.card.high.success{--prism-card-border-color:var(--prism-color-border-success-focus);--prism-card-background-color:var(--prism-color-fill-success-base)}.card.primary-brand{--prism-card-border-color:var(--prism-color-border-brand-primary-base);--prism-card-background-color:var(--prism-color-material-brand-primary-base)}.card.secondary-brand{--prism-card-border-color:var(--prism-color-border-brand-secondary-base);--prism-card-background-color:var(--prism-color-material-brand-secondary-base)}.card.high.primary-brand{--prism-card-border-color:var(--prism-color-border-brand-primary-focus);--prism-card-background-color:var(--prism-color-fill-brand-primary-base)}.card.high.secondary-brand{--prism-card-border-color:var(--prism-color-border-brand-secondary-focus);--prism-card-background-color:var(--prism-color-fill-brand-secondary-base)}.card.high{--prism-card-text-color:var(--prism-color-text-primary-inverse-base)}.card.primary.high{--prism-card-background-color:var(--prism-color-fill-primary-base)}.card.primary-inverse.high,.card.secondary-inverse.high{--prism-card-background-color:var(--prism-color-fill-primary-inverse-base);--prism-card-text-color:var(--prism-color-text-primary)}.card.secondary.high{--prism-card-background-color:var(--prism-color-fill-secondary-base)}.card.expressive-brand-linear{background-image:var(--prism-color-gradient-linear-brand-primary)}.card.expressive-brand-linear,.card.linear-accent-100{--prism-card-background-color:var(--prism-color-fill-brand-primary-base);--prism-card-text-color:var(--prism-color-text-primary-inverse-base);--prism-card-border-color:var(--prism-color-border-brand-primary-base)}.card.linear-accent-100{background-image:var(--prism-color-gradient-linear-accent-100)}.card.linear-accent-200{background-image:var(--prism-color-gradient-linear-accent-200)}.card.linear-accent-200,.card.linear-accent-300{--prism-card-background-color:var(--prism-color-fill-brand-primary-base);--prism-card-text-color:var(--prism-color-text-primary-inverse-base);--prism-card-border-color:var(--prism-color-border-brand-primary-base)}.card.linear-accent-300{background-image:var(--prism-color-gradient-linear-accent-300)}.card.linear-accent-400{background-image:var(--prism-color-gradient-linear-accent-400)}.card.linear-accent-400,.card.linear-accent-500{--prism-card-background-color:var(--prism-color-fill-brand-primary-base);--prism-card-text-color:var(--prism-color-text-primary-inverse-base);--prism-card-border-color:var(--prism-color-border-brand-primary-base)}.card.linear-accent-500{background-image:var(--prism-color-gradient-linear-accent-500)}.card.linear-accent-600{--prism-card-background-color:var(--prism-color-fill-brand-primary-base);--prism-card-text-color:var(--prism-color-text-primary-inverse-base);--prism-card-border-color:var(--prism-color-border-brand-primary-base);background-image:var(--prism-color-gradient-linear-accent-600)}.eyebrow-cell{color:var(--prism-color-text-primary-inverse-base)}.eyebrow-tone-info{background-color:var(--prism-color-fill-info-base)}.eyebrow-tone-success{background-color:var(--prism-color-fill-success-base)}.eyebrow-tone-caution{background-color:var(--prism-color-fill-caution-base)}.eyebrow-tone-danger{background-color:var(--prism-color-fill-danger-base)}.eyebrow-tone-primary{background-color:var(--prism-color-fill-primary-base)}.eyebrow-tone-primary-inverse,.eyebrow-tone-secondary-inverse{background-color:var(--prism-color-fill-primary-inverse-base);color:var(--prism-color-text-primary-base)}.eyebrow-tone-secondary{background-color:var(--prism-color-fill-secondary-base)}.eyebrow-tone-primary-brand{background-color:var(--prism-color-fill-brand-primary-base)}.eyebrow-tone-secondary-brand{background-color:var(--prism-color-fill-brand-secondary-base)}.eyebrow-tone-expressive-brand-linear{background-image:var(--prism-color-gradient-linear-brand-primary)}.eyebrow-tone-linear-accent-100{background-image:var(--prism-color-gradient-linear-accent-100)}.eyebrow-tone-linear-accent-200{background-image:var(--prism-color-gradient-linear-accent-200)}.eyebrow-tone-linear-accent-300{background-image:var(--prism-color-gradient-linear-accent-300)}.eyebrow-tone-linear-accent-400{background-image:var(--prism-color-gradient-linear-accent-400)}.eyebrow-tone-linear-accent-500{background-image:var(--prism-color-gradient-linear-accent-500)}.eyebrow-tone-linear-accent-600{background-image:var(--prism-color-gradient-linear-accent-600)}.selected{box-shadow:var(--prism-shadow-md-base)}.card.selected{--prism-card-border-alpha-percentage:var(--prism-alpha-primary-percentage)}.selected-icon{position:absolute;right:-.75rem;top:-.75rem;z-index:1}.selected.high .selected-icon{border-radius:2.5rem;outline-style:solid;outline-width:2px}@media (prefers-reduced-motion:reduce){.card{transition:none}}.horizontal,.horizontal-reverse,.mixed,.mixed-reverse,.stacked{display:flex}.horizontal,.horizontal-reverse,.mixed,.mixed-reverse{align-items:center;-moz-column-gap:var(--prism-spacer-size-lg);column-gap:var(--prism-spacer-size-lg);justify-content:space-around}.horizontal-reverse,.mixed-reverse{flex-direction:row-reverse}.stacked{flex-direction:column;row-gap:var(--prism-spacer-size-lg)}@media (min-width:640px){.mixed,.mixed-reverse{flex-direction:column;gap:var(--prism-spacer-size-lg) 0}.mixed .image,.mixed-reverse .image{place-self:auto}}.clickable:has(.link:focus-visible){outline:1px solid var(--prism-color-border-primary-focus);outline-offset:2px}.clickable:not(.disabled):not(.selected):hover{box-shadow:var(--prism-shadow-md-hover)}.clickable.selected:not(.disabled):hover{box-shadow:var(--prism-shadow-lg-hover)}.link:not([disabled]){cursor:pointer}.link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:inherit;display:block;font:inherit;height:100%;outline:none;padding:0;-webkit-text-decoration:none;text-decoration:none;width:100%}.link,.link:after{transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.link:after{bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;z-index:var(--prism-layout-z-index-base)}.footer{margin-top:var(--prism-spacer-size-xxl)}::slotted(img){border-radius:var(--prism-radius-size-sm);margin:auto}.screen-reader-text{height:1px;margin:-1px;width:1px}', y = u, f = class {
+  constructor(i) {
+    p(this, i), this.prismClick = l(this, "prismClick", 7), this.prismFocus = l(this, "prismFocus", 7), this.prismBlur = l(this, "prismBlur", 7), this.uid = g(), this.slots = {
+      image: !1,
+      actions: !1,
+      eyebrow: {
+        leading: !1,
+        trailing: !1
+      }
+    }, this._attributes = {}, this._toggleClick = (e) => {
+      this.selected = !this.selected, this.onClick(e);
+    }, this.onClick = (e) => {
+      let { currentTarget: a } = e, { id: o } = a;
+      this.prismClick.emit({ id: o, selected: this.selected, target: a }).defaultPrevented && e.preventDefault();
+    }, this.onFocus = (e) => {
+      let { currentTarget: a } = e, { id: o } = a;
+      this.prismFocus.emit({ id: o, selected: this.selected, target: a });
+    }, this.onBlur = (e) => {
+      let { currentTarget: a } = e, { id: o } = a;
+      this.prismBlur.emit({ id: o, selected: this.selected, target: a });
+    }, this.prismId = `prism-card-${this.uid}`, this.display = "static", this.anchorAttr = void 0, this.buttonAttr = { type: "button" }, this.tone = void 0, this.priority = "low", this.selected = !1, this.disabled = !1, this.href = void 0, this.align = "center", this.eyebrow = void 0, this.eyebrowTone = void 0, this.eyebrowTag = "p", this.layout = "stacked", this.headline = void 0, this.headlineSize = "300", this.headlineTag = "h2", this.interactiveAttrs = {
+      id: `${this.prismId}-${this.display}`,
+      onBlur: (e) => this.onBlur(e),
+      onFocus: (e) => this.onFocus(e),
+      class: { "screen-reader-text": !this.headline, link: !0 },
+      part: "native",
+      disabled: this.disabled,
+      "aria-labelledby": this.headline ? null : this.prismId
+    };
+  }
+  /** @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"]'), v("prism-card");
+  }
+  hasInteraction() {
+    return this.href !== void 0 && this.href !== "" || this.display !== "static";
+  }
+  updateInteractiveAttrs() {
+    this.interactiveAttrs = {
+      id: `${this.prismId}-${this.display}`,
+      onBlur: (i) => this.onBlur(i),
+      onFocus: (i) => this.onFocus(i),
+      class: { "screen-reader-text": !this.headline, link: !0 },
+      part: "native",
+      disabled: this.disabled,
+      "aria-labelledby": this.headline ? null : this.prismId
+    };
+  }
+  /** Card Contents */
+  renderCardContent(i) {
+    const e = this.slots.actions && !this.hasInteraction(), a = (s) => [
+      "expressive-brand-linear",
+      "linear-accent-100",
+      "linear-accent-200",
+      "linear-accent-300",
+      "linear-accent-400",
+      "linear-accent-500",
+      "linear-accent-600"
+    ].includes(s), o = this.tone === "primary" || this.tone === "secondary" || a(this.tone) ? "primary-brand" : this.tone, t = this.tone === "primary-inverse" || this.tone === "secondary-inverse" ? "primary" : "primary-inverse", c = this.tone === "primary-inverse" || this.tone === "secondary-inverse" ? "primary-inverse" : a(this.tone) ? "primary-brand" : this.tone;
+    return r(m, null, this.selected && r("prism-icon", {
+      size: "xs",
+      contained: !0,
+      // Reversed Priority for Checkmark
+      containedPriority: this.priority === "high" ? "low" : "high",
+      containedTone: o,
+      tone: this.priority === "high" ? c : t,
+      containedDisplay: "fill",
+      display: "fill",
+      class: { "selected-icon": !0, [`stroke-tone-${this.tone}`]: !0 },
+      name: "check"
+    }), r("section", { id: this.prismId, part: "inner", class: {
+      disabled: this.disabled,
+      [this.tone]: !!this.tone,
+      card: !0,
+      eyebrow: !!this.eyebrow,
+      selected: this.selected,
+      [this.priority]: !0,
+      clickable: this.hasInteraction()
+    } }, this.eyebrow && r("section", { ref: (s) => this.eyebrowElement = s, class: { "eyebrow-cell": !0, [`eyebrow-tone-${this.eyebrowTone}`]: !!this.eyebrowTone } }, r("slot", { name: "eyebrow-asset-leading" }), r("prism-text", { tag: this.eyebrowTag, class: { "title-right": this.slots.eyebrow.trailing, "title-left": this.slots.eyebrow.leading }, as: "button-sm" }, this.eyebrow), r("slot", { name: "eyebrow-asset-trailing" })), r("section", { class: { [this.layout]: !0, [this.align]: !0 } }, this.slots.image && r("section", { class: "image" }, r("slot", { name: "image" })), r("section", { class: "content" }, this.headline ? r("prism-text", { tag: this.headlineTag, class: "heading", family: "headline", size: this.headlineSize }, i ? (
+      // eslint-disable-next-line react/jsx-no-bind
+      r(i, Object.assign({ ref: (s) => this.nativeElement = s }, this._attributes, this.interactiveAttrs), this.headline)
+    ) : this.headline) : i ? r(
+      i,
+      Object.assign({
+        // eslint-disable-next-line react/jsx-no-bind
+        ref: (s) => this.nativeElement = s
+      }, this._attributes, this.interactiveAttrs)
+    ) : null, r("slot", null), e && r("div", { class: "footer" }, r("slot", { name: "actions" }))))));
+  }
+  toggleSelection() {
+  }
+  renderCard() {
+    if (!this.hasInteraction())
+      return [this.renderCardContent()];
+    const a = (() => {
+      var o, t, c, s;
+      let d = this.display;
+      switch (this.href && (d = "anchor"), d) {
+        case "anchor":
+          return this._attributes = {
+            onClick: (n) => this.onClick(n),
+            download: (o = this.anchorAttr) === null || o === void 0 ? void 0 : o.download,
+            href: this.href,
+            rel: (t = this.anchorAttr) === null || t === void 0 ? void 0 : t.rel,
+            target: (c = this.anchorAttr) === null || c === void 0 ? void 0 : c.target
+          }, "a";
+        case "button":
+          return this._attributes = { onClick: (n) => this.onClick(n), type: (s = this.buttonAttr) === null || s === void 0 ? void 0 : s.type }, "button";
+        case "toggle":
+          return this._attributes = {
+            onClick: (n) => this._toggleClick(n),
+            type: "button",
+            "aria-pressed": this.selected.toString()
+          }, "button";
+        default:
+          return;
+      }
+    })();
+    return r(m, null, this.renderCardContent(a));
+  }
+  render() {
+    return r(b, { key: "67e1eac3fea8f1a5c41cf86ec01685d58aa39c28", class: {
+      disabled: this.disabled
+    } }, this.renderCard());
+  }
+  get el() {
+    return h(this);
+  }
+  static get watchers() {
+    return {
+      prismId: ["updateInteractiveAttrs"],
+      display: ["updateInteractiveAttrs"],
+      headline: ["updateInteractiveAttrs"],
+      disabled: ["updateInteractiveAttrs"],
+      selected: ["toggleSelection"]
+    };
+  }
+};
+f.style = y;
+export {
+  f as prism_card
+};