@kubex/zinc 1.1.174 → 1.1.176

package/docs/pages/components/vertical-stepper.md

@@ -35,7 +35,7 @@ Use the `active` attribute to highlight the current step in the process. The act
 
 ### With Custom Icons
 
-Use the `icon` slot to add custom icons or indicators for each step.
+Use the `icon` slot to add custom icons or indicators for each step. The icon is centred in the step's 32px circle, so keep it at the default 24px size or smaller.
 
 ```html:preview
 <zn-vertical-stepper caption="Personal Details" description="Enter your name and contact information" first active>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.174",
+  "version": "1.1.176",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/content-block/content-block.component.ts

@@ -2,7 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
-import {looksLikeHtml, sanitizeHtml} from './sanitize-html';
+import {htmlToText, looksLikeHtml, sanitizeHtml} from './sanitize-html';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
@@ -292,7 +292,7 @@ export default class ContentBlock extends ZincElement {
   protected truncateText() {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     if (!textContent) return '';
-    const trimmed = textContent.innerText.replace(/<[^>]*>/g, '').trim();
+    const trimmed = htmlToText(textContent.innerText);
     return trimmed.length > 32 ? trimmed.substring(0, 32) + '...' : trimmed;
   }
 

package/src/components/content-block/content-block.test.ts

@@ -63,4 +63,18 @@ describe('<zn-content-block>', () => {
     expect(content.textContent).to.not.contain('<br');
     expect(content.querySelectorAll('br').length).to.be.greaterThan(1);
   });
+
+  it('should decode entities and strip markup in the header preview', async () => {
+    const preview = async (body: string) => {
+      const el = await fixture<LitElement>(
+        `<zn-content-block><div slot="text">${body}</div></zn-content-block>`
+      );
+      await el.updateComplete;
+      return el.shadowRoot!.querySelector('.content-block-header__description')!.textContent;
+    };
+
+    expect(await preview('test&amp;nbsp;send')).to.equal('test send');
+    expect(await preview('&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;there&lt;/p&gt;')).to.equal('Hello there');
+    expect(await preview('From: Bob &lt;bob@example.com&gt;')).to.equal('From: Bob <bob@example.com>');
+  });
 });

package/src/components/content-block/sanitize-html.ts

@@ -83,3 +83,14 @@ export function sanitizeHtml(source: string): string {
   copyChildren(parsed.body, root, out);
   return root.innerHTML;
 }
+
+/** Plain text of a body that may be HTML source or text holding encoded entities like ` `. */
+export function htmlToText(source: string): string {
+  // Plain text is escaped so an address like `<bob@example.com>` isn't parsed as a tag
+  const markup = looksLikeHtml(source)
+    ? sanitizeHtml(source)
+    : source.replace(/<br\s*\/?>/gi, ' ').replace(/</g, '&lt;');
+  const parsed = new DOMParser().parseFromString(markup, 'text/html');
+  parsed.body.querySelectorAll('br, p, li').forEach((el) => el.after(' '));
+  return (parsed.body.textContent ?? '').replace(/\s+/g, ' ').trim();
+}

package/src/components/vertical-stepper/vertical-stepper.scss

@@ -18,6 +18,10 @@
   &__icon {
     width: var(--zn-spacing-large);
     height: var(--zn-spacing-large);
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     background-color: rgb(var(--zn-input-bg));
     border-width: 1px;
     border-radius: 100%;