scb-wc 0.1.78 → 0.1.80

package/scb-card/scb-card-variants.internal.js

@@ -0,0 +1,230 @@
+import { html as e, nothing as t } from "lit";
+//#region src/scb-components/scb-card/scb-card-variants.internal.ts
+var n = "\n  .scb-card.no-hover,\n  .scb-card.no-hover:hover,\n  .scb-card.no-hover:active {\n    box-shadow: none !important;\n    cursor: default !important;\n  }\n\n  .scb-card.no-hover md-ripple {\n    display: none !important;\n  }\n\n  :host([type='social']) .scb-card {\n    overflow: visible;\n  }\n\n  .social-metrics a.comments,\n  .social-metrics a.author {\n    color: var(--md-sys-color-primary, #1F44FF);\n    text-decoration: none;\n    border-radius: 4px;\n    cursor: pointer;\n    outline: none;\n  }\n\n  .social-metrics a.comments:hover,\n  .social-metrics a.comments:focus,\n  .social-metrics a.author:hover,\n  .social-metrics a.author:focus {\n    color: var(--md-sys-color-primary, #1F44FF);\n    text-decoration: var(--scb-link-decoration, underline);\n    text-underline-offset: var(--scb-link-underline-offset, .22em);\n    text-decoration-thickness: var(--scb-link-underline-thickness, 1px);\n  }\n\n  .container-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--scb-card-container-gap, var(--scb-card-size-container-gap));\n    padding-block-start: var(--scb-card-container-padding-block-start, var(--scb-card-content-padding-block-start, var(--scb-card-size-content-padding-block)));\n    padding-block-end: var(--scb-card-container-padding-block-end, var(--scb-card-content-padding-block-end, var(--scb-card-size-content-padding-block)));\n    padding-inline-start: var(--scb-card-container-padding-inline-start, var(--scb-card-content-padding-inline-start, var(--scb-card-size-content-padding-inline)));\n    padding-inline-end: var(--scb-card-container-padding-inline-end, var(--scb-card-content-padding-inline-end, var(--scb-card-size-content-padding-inline)));\n    min-inline-size: 0;\n  }\n\n  .container-content.has-header {\n    gap: var(--scb-card-container-gap-with-header, var(--scb-card-size-container-gap-with-header));\n  }\n\n  .container-content > .chip-slot {\n    margin-block-end: 0;\n  }\n\n  .social-metrics {\n    display: flex;\n    margin-top: var(--spacing-4, 12px);\n    gap: var(--scb-card-size-social-gap);\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .social-metrics .card-icon {\n    width: var(--scb-card-size-social-icon);\n    height: var(--scb-card-size-social-icon);\n    font-size: var(--scb-card-size-social-icon-font-size, var(--scb-card-size-social-icon));\n    vertical-align: middle;\n  }\n\n  .social-text{\n    font-size: var(--scb-card-size-social-text);\n  }\n\n  .comments,\n  .likes {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-2, 4px);\n  }\n\n  .social-action {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--spacing-1, 2px);\n  }\n\n  .scb-card .content.list {\n    margin-top: 0;\n  }\n\n  .scb-card .content.list.has-top-content {\n    margin-top: var(--scb-card-size-list-offset);\n  }\n\n  .scb-card .content.actions ::slotted(*) {\n    margin-top: var(--scb-card-size-actions-offset);\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-3, 8px);\n  }\n\n  .scb-card .content.links {\n    margin-top: var(--scb-card-size-links-offset);\n    font-size: var(--scb-card-size-link-font-size);\n    line-height: var(--scb-card-size-link-line-height);\n    letter-spacing: var(--scb-card-size-link-letter-spacing);\n  }\n\n  .scb-card .content.links ::slotted(a),\n  .scb-card .content.links ::slotted(scb-link) {\n    display: block;\n    margin-block-start: var(--scb-card-size-links-item-offset);\n  }\n\n  .scb-card .content.links ::slotted(a) {\n    font-size: var(--scb-card-size-link-font-size);\n    line-height: var(--scb-card-size-link-line-height);\n    letter-spacing: var(--scb-card-size-link-letter-spacing);\n  }\n\n  .scb-card .content.links ::slotted(scb-link) {\n    --scb-link-font-size: var(--scb-card-size-link-font-size);\n    --scb-link-line-height: var(--scb-card-size-link-line-height);\n    --scb-link-letter-spacing: var(--scb-card-size-link-letter-spacing);\n  }\n\n  .scb-card:not(.filled):not(.filled-alternative) .content.list ::slotted(scb-list) {\n    --scb-list-bg: var(--md-sys-color-surface, #FFFFFF);\n  }\n\n  .scb-card.filled .content.list ::slotted(scb-list) {\n    --scb-list-bg: var(--md-sys-color-surface-dim, #F9F8EF);\n  }\n\n  .scb-card.filled-alternative .content.list ::slotted(scb-list) {\n    --scb-list-bg: var(--md-sys-color-surface-container, #EEF3FF);\n  }\n";
+function r(e) {
+	if (!(e instanceof ShadowRoot) || e.querySelector("style[data-scb-card-variants]")) return;
+	let t = document.createElement("style");
+	t.dataset.scbCardVariants = "", t.textContent = n, e.appendChild(t);
+}
+function i(e) {
+	return String(e ?? "").replace(/ /g, "\xA0").replace(/-/g, "‑");
+}
+function a(e) {
+	let t = document.createElement("textarea");
+	return t.innerHTML = e, t.value;
+}
+function o(e) {
+	let t = String(e ?? "");
+	for (let e = 0; e < 5; e += 1) {
+		let e = a(t);
+		if (e === t) break;
+		t = e;
+	}
+	return t.replace(/<\s*(br|\/p|\/div|\/li|\/h[1-6]|\/tr)\b[^>]*>/gi, " ").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+}
+function s(e, t) {
+	let n = e.renderRoot?.querySelector(".scb-card");
+	n && (t ? n.classList.add("no-hover") : n.classList.remove("no-hover"));
+}
+function c(e, t, n) {
+	e.dispatchEvent(new CustomEvent(t, {
+		bubbles: !0,
+		composed: !0,
+		detail: n
+	})), e.dispatchEvent(new CustomEvent(t.replace("-", ""), {
+		bubbles: !0,
+		composed: !0,
+		detail: n
+	}));
+}
+function l(e, t, n) {
+	e.dispatchEvent(new CustomEvent(`social-${t}`, {
+		bubbles: !0,
+		composed: !0,
+		detail: {
+			action: t,
+			originalEvent: n
+		}
+	}));
+}
+function u(n, r, i) {
+	switch (r) {
+		case "list": return e`
+        <div class="full-content">
+          ${i.hasListTopContent ? i.topContentTpl(!1) : t}
+          <div class="content list ${i.hasListTopContent ? "has-top-content" : ""}">
+            <slot name="list"></slot><slot></slot>
+          </div>
+          ${i.footerTpl()}
+        </div>
+      `;
+		case "social": return d(n, i);
+		case "link": return e`
+        <div class="full-content">
+          ${i.topContentTpl(!1)}
+          <div class="content links">
+            <slot name="links"></slot><slot></slot>
+          </div>
+          ${i.footerTpl()}
+        </div>
+      `;
+		case "action": return e`
+        <div class="full-content">
+          ${i.topContentTpl(!1)}
+          <div class="content actions">
+            <slot name="actions"></slot><slot></slot>
+          </div>
+          ${i.footerTpl()}
+        </div>
+      `;
+		case "container": return e`
+        <div class="container-content ${i.hasHeading || i.hasSubtitle ? "has-header" : ""}">
+          ${i.contentChipTpl()}
+          ${i.hasHeading || i.hasSubtitle ? e`
+                <div class="top-content">
+                  ${i.headerTpl(!1)}
+                  ${i.subtitleTpl()}
+                </div>
+              ` : t}
+          <slot></slot>
+          ${i.footerTpl()}
+        </div>
+      `;
+		default: return e`
+        <div class="full-content">
+          ${i.topContentTpl(!!i.effectiveHref)}
+          ${i.footerTpl()}
+        </div>
+      `;
+	}
+}
+function d(n, r) {
+	let a = n.commentsHref, u = o(n.supportingText), d = (e) => {
+		e.stopPropagation();
+	}, f = n.commentsText ? `${n.commentsText}: ` : "", p = n.likesText ? `${n.likesText}: ` : "", m = (e) => (t) => {
+		t.stopPropagation(), l(n, e, t);
+	}, h = n.likesDisabled ? t : e`
+        <span
+          class="likes"
+          @mouseenter=${() => s(n, !0)}
+          @mouseleave=${() => s(n, !1)}
+        >
+          ${n.likesInteractive ? e`
+                <scb-icon-button
+                  id="like-button"
+                  variant="standard"
+                  icon="thumb_up"
+                  ?icon-filled=${n.hasLiked}
+                  aria-label="${n.likesText || "Gilla"}"
+                  @click=${(e) => {
+		e.stopPropagation(), n.hasLiked = !n.hasLiked, c(n, "like-click", {
+			hasLiked: n.hasLiked,
+			likes: n.likes ?? 0
+		});
+	}}
+                  @keydown=${(e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n.hasLiked = !n.hasLiked, c(n, "like-click", {
+			hasLiked: n.hasLiked,
+			likes: n.likes ?? 0
+		}));
+	}}
+                  @hover=${(e) => {
+		e.preventDefault(), e.stopPropagation(), c(n, "like-hover", {
+			hasLiked: n.hasLiked,
+			likes: n.likes ?? 0
+		});
+	}}
+                ></scb-icon-button>
+              ` : e`<span class="card-icon" aria-hidden="true">thumb_up</span>`}
+          <span class="social-text">${p}${n.likes ?? 0}</span>
+        </span>
+      `;
+	return e`
+    <div class="full-content">
+      ${r.topContentTpl(!!r.effectiveHref, !0, !0, u)}
+      <div class="content">
+        <div class="social-metrics">
+          ${n.author ? e`
+                <a
+                  class="author social-text"
+                  href="${n.authorHref || "#"}"
+                  tabindex="0"
+                  @click=${d}
+                  @mouseenter=${() => s(n, !0)}
+                  @mouseleave=${() => s(n, !1)}
+                  >${n.authorText}</a
+                >
+              ` : t}
+          ${n.commentsDisabled ? t : e`
+                <span
+                  class="comments"
+                  @mouseenter=${() => s(n, !0)}
+                  @mouseleave=${() => s(n, !1)}
+                >
+                  ${a === "" ? e`
+                        <span class="card-icon" aria-hidden="true">comment</span>
+                      ` : e`
+                        <scb-icon-button
+                          href="${a}"
+                          tabindex="0"
+                          @click=${d}
+                          variant="standard"
+                          icon="comment"
+                          aria-label="Gå till kommentarer"
+                        ></scb-icon-button>
+                      `}
+                  <span class="social-text">${f}${n.comments ?? 0}</span>
+                </span>
+              `}
+          ${n.likesHoverContent ? e`
+                <scb-tooltip
+                  variant="rich"
+                  for="like-button"
+                  supporting-text=${i(n.likesHoverContent)}
+                  trigger="hover"
+                  position="right"
+                >
+                  ${h}
+                </scb-tooltip>
+              ` : h}
+          ${n.replyEnabled ? e`
+                <span class="social-action">
+                  <scb-icon-button
+                    variant="standard"
+                    icon="reply"
+                    aria-label="Svara"
+                    @click=${m("reply")}
+                  ></scb-icon-button>
+                  <span class="social-text">Svara</span>
+                </span>
+              ` : t}
+          ${n.editEnabled ? e`
+                <span class="social-action">
+                  <scb-icon-button
+                    variant="standard"
+                    icon="edit"
+                    aria-label="Redigera"
+                    @click=${m("edit")}
+                  ></scb-icon-button>
+                  <span class="social-text">Redigera</span>
+                </span>
+              ` : t}
+          ${n.deleteEnabled ? e`
+                <span class="social-action">
+                  <scb-icon-button
+                    variant="standard"
+                    icon="delete"
+                    aria-label="Ta bort"
+                    @click=${m("delete")}
+                  ></scb-icon-button>
+                  <span class="social-text">Ta bort</span>
+                </span>
+              ` : t}
+        </div>
+      </div>
+      ${r.footerTpl()}
+    </div>
+  `;
+}
+//#endregion
+export { r as ensureScbCardVariantStyles, u as renderScbCardVariant };