@kubex/zinc 0.0.2 → 1.0.0

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

@@ -0,0 +1,225 @@
+import {classMap} from "lit/directives/class-map.js";
+import {HasSlotController} from "../../internal/slot";
+import {html, unsafeCSS} from 'lit';
+import {property, queryAssignedNodes, queryAsync} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import ZincElement from "../../internal/zinc-element";
+import type {PropertyValues} from 'lit';
+
+import styles from './content-block.scss';
+
+interface TextRow {
+  lines: string[];
+  type: 'reply' | 'text';
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/content-block
+ * @status experimental
+ * @since 1.0
+ */
+export default class ContentBlock extends ZincElement {
+  static styles = unsafeCSS(styles);
+
+  @property() time = '';
+  @property() sender = '';
+  @property() avatar = '';
+
+  @property({type: Boolean, reflect: true}) outbound = false;
+  @property({type: Boolean, reflect: true}) short = false;
+
+  @queryAssignedNodes({slot: 'html', flatten: true}) htmlNodes!: Node[];
+
+  @queryAsync('iframe') iframe!: Promise<HTMLIFrameElement>;
+
+  private readonly hasSlotController = new HasSlotController(this, 'text', 'html');
+
+  private _textRows: TextRow[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.iframe.then((iframe) => {
+      if (iframe.contentDocument) {
+        const div = this.htmlNodes[0] as HTMLDivElement;
+        if (div) {
+          let convertedHtml = div?.innerHTML ?? '';
+          convertedHtml = convertedHtml.replace(/&nbsp;/g, ' ');
+          convertedHtml = convertedHtml.replace(/&lt;/g, '<');
+          convertedHtml = convertedHtml.replace(/&gt;/g, '>');
+          convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+
+          const baseStyles = "<style>body,html{padding: 0; margin: 0; font-size: 13px; font-family: Arial;}</style>";
+          iframe.srcdoc = baseStyles + convertedHtml;
+        }
+      }
+    });
+  }
+
+  private _collapseContent(e: Event) {
+    const target = e.target as HTMLElement;
+    const headerClick = target.classList.contains('content-block-header') ||
+      target.parentElement?.classList.contains('content-block-header');
+
+    if (headerClick && target.slot !== 'nav') {
+      this.short = !this.short;
+      this.requestUpdate();
+    }
+  }
+
+  private _toggleText() {
+    const textContent = this.shadowRoot?.querySelector('.text-content') as HTMLDivElement | null;
+    this.iframe.then((iframe) => {
+      if (textContent) {
+        iframe.classList.add('hidden');
+        textContent.classList.remove('hidden');
+      }
+    });
+  }
+
+  private _toggleHtml() {
+    const textContent = this.shadowRoot?.querySelector('.text-content') as HTMLDivElement | null;
+    this.iframe.then((iframe) => {
+      if (textContent) {
+        iframe.classList.remove('hidden');
+        textContent.classList.add('hidden');
+      }
+    });
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    const textContent = this.shadowRoot?.querySelectorAll('.text-section');
+    if (textContent && textContent.length > 0) {
+      textContent.forEach((content) => {
+        content.innerHTML = content.innerHTML.replace(/&nbsp;/g, ' ');
+        content.innerHTML = content.innerHTML.replace(/<!--[\s\S]*?-->/g, '');
+        content.innerHTML = content.innerHTML.replace(/<\/p><br>/g, '</p>');
+      });
+    }
+  }
+
+  protected render() {
+    const text = this.getTextSections();
+    const hasFooter = this.querySelector(`:scope > [slot="footer"]`) !== null;
+    const hasTextSlot = this.hasSlotController.test('text');
+    const hasHtmlSlot = this.hasSlotController.test('html');
+    const showActions = hasTextSlot && hasHtmlSlot;
+
+    return html`
+      <zn-panel flush tabbed class="${classMap({
+        'content-block--outbound': this.outbound,
+        'content-block--short': this.short
+      })}">
+
+        <zn-header class="content-block-header"
+                   caption="${this.sender}"
+                   description="${this.truncateText()}"
+                   @click="${this._collapseContent}">
+
+          <zn-icon src="${this.avatar}"
+                   library="avatar"
+                   round></zn-icon>
+
+          <div slot="actions">
+            <small>${this.time}</small>
+            ${showActions ? html`
+              <zn-dropdown>
+                <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent"
+                           size="content"></zn-button>
+                <zn-menu>
+                  <zn-menu-item @click="${this._toggleHtml}">
+                    Show HTML
+                  </zn-menu-item>
+                  <zn-menu-item @click="${this._toggleText}">
+                    Show Text
+                  </zn-menu-item>
+                </zn-menu>
+              </zn-dropdown>
+            ` : ''}
+          </div>
+
+        </zn-header>
+
+        <zn-sp no-gap>
+          <iframe class="hidden" title="Content block HTML preview"></iframe>
+          <slot class="html-content" name="html" style="display: none;"></slot>
+          <slot name="text" style="display: none;"></slot>
+          <div class="text-content">
+            ${text.map((section) => html`
+              ${section.type === 'reply' ? html`
+                <div class="toggle-reply" @click="${this.showReply}">...</div>` : ''}
+              <div class=${classMap({
+                'text-section': true,
+                'text-section--reply': section.type === 'reply',
+                'text-section--text': section.type === 'text',
+                'hidden': section.type === 'reply'
+              })}>
+                ${section.lines.map((line) => html`${unsafeHTML(line)}<br>`)}
+              </div>
+            `)}
+          </div>
+        </zn-sp>
+
+        ${hasFooter ? html`
+          <slot slot="footer" name="footer"></slot>` : ''}
+      </zn-panel>
+    `;
+  }
+
+  protected truncateText() {
+    const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
+    if (!textContent) return '';
+    const trimmed = textContent.innerText.replace(/<[^>]*>/g, '').trim();
+    return trimmed.length > 32 ? trimmed.substring(0, 32) + '...' : trimmed;
+  }
+
+  protected getTextSections(): TextRow[] {
+    const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
+    const textRows: TextRow[] = [];
+
+    if (textContent) {
+      const text = textContent.innerText;
+      const rows = text.split('\n');
+      let previousType: TextRow['type'] | null = null;
+      let forceReply = false;
+      let type: TextRow['type'] = 'text';
+
+      const containsGraterThan = rows.some((row) => row.startsWith('>'));
+
+      rows.forEach((rowOrig) => {
+        let row = rowOrig;
+        if (((row.startsWith('On') && row.endsWith('wrote:')) || row.startsWith('From:')) && !containsGraterThan) forceReply = true;
+        if (row.startsWith('--')) forceReply = false;
+        type = (forceReply || row.startsWith('>')) ? 'reply' : 'text';
+        if (row.startsWith('Sent from')) type = 'reply';
+        if (row.trim() === '' && previousType === 'reply') type = 'reply';
+        if (type === 'reply' && row.startsWith('>')) row = row.substring(1).trim();
+
+        if (previousType === type) {
+          if (textRows.length === 0) {
+            textRows.push({lines: [row], type});
+            previousType = type;
+            return;
+          }
+          textRows[textRows.length - 1].lines.push(row);
+        } else {
+          textRows.push({lines: [row], type});
+          previousType = type;
+        }
+      });
+    }
+
+    this._textRows = textRows;
+    return this._textRows;
+  }
+
+  showReply(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    const nextElement = target.nextElementSibling;
+    if (nextElement) {
+      nextElement.classList.toggle('hidden');
+    }
+  }
+}

package/src/components/content-block/content-block.scss

@@ -0,0 +1,64 @@
+:host {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: rgb(var(--zn-border-color));
+  }
+}
+
+zn-header div[slot='actions'] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+zn-header::part(base) {
+  cursor: pointer;
+}
+
+zn-header::part(header-left) {
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+zn-navbar {
+  cursor: default;
+}
+
+.content-block--short {
+  zn-sp, zn-navbar {
+    display: none;
+  }
+
+  zn-header::part(base) {
+    border-bottom: none;
+  }
+}
+
+zn-panel.content-block--short::part(mid) {
+  display: none;
+}
+
+zn-panel:not(.content-block--short) zn-header::part(header-description) {
+  display: none;
+}
+
+.text-section {
+  font-size: 13px;
+  line-height: 19px;
+
+  a {
+    font-size: 10px;
+    opacity: 0.8;
+  }
+}
+
+.hidden {
+  display: none;
+}

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

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-content-block>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-content-block></zn-content-block> `);
+
+    expect(el).to.exist;
+  });
+});

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

@@ -0,0 +1,12 @@
+import ZnContentBlock from './content-block.component';
+
+export * from './content-block.component';
+export default ZnContentBlock;
+
+ZnContentBlock.define('zn-content-block');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-content-block': ZnContentBlock;
+  }
+}

package/src/components/copy-button/copy-button.component.ts

@@ -0,0 +1,163 @@
+import {property, query, state} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './copy-button.scss';
+import {classMap} from "lit/directives/class-map.js";
+import ZnTooltip from "../tooltip";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/copy-button
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnCopyButton extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @query('slot[name="copy-icon"') copyIcon: HTMLSlotElement;
+
+  @query('slot[name="success-icon"') successIcon: HTMLSlotElement;
+
+  @query('slot[name="error-icon"') errorIcon: HTMLSlotElement;
+
+  @query('zn-tooltip') tooltip: ZnTooltip;
+
+  @state() isCopying = false;
+
+  @state() status: 'rest' | 'success' | 'error' = 'rest';
+
+  @property() value = '';
+
+  @property({attribute: 'copy-label'}) copyLabel = '';
+
+  @property() src = '';
+
+
+  /**
+   * An id that references an element in the same document from which data will be copied. If both this and `value` are
+   * present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
+   * attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
+   * append a dot and the property name, e.g. `from="el.value"`.
+   */
+  @property() from = '';
+
+
+  render() {
+    const copyLabel = this.copyLabel || 'Copy';
+
+    return html`
+      <zn-tooltip
+        class=${classMap({
+          'copy-button': true,
+          'copy-button--error': this.status === 'error',
+          'copy-button--success': this.status === 'success',
+        })}
+        content=${copyLabel}>
+        <button class="copy-button__button" part="button" @click=${this.handleCopy}>
+          <slot part="copy-icon" name="copy-icon">
+            <zn-icon src="${this.src ? this.src : 'content_copy'}"></zn-icon>
+          </slot>
+          <slot part="success-icon" name="success-icon" hidden>
+            <zn-icon src="check"></zn-icon>
+          </slot>
+          <slot part="error-icon" name="error-icon" hidden>
+            <zn-icon src="priority_high"></zn-icon>
+          </slot>
+        </button>
+      </zn-tooltip>
+    `;
+  }
+
+  private async showStatus(status: 'success' | 'error') {
+    const iconToShow = status === 'success' ? this.successIcon : this.errorIcon;
+    this.tooltip.content = status === 'success' ? 'Copied!' : 'Error!';
+
+    this.copyIcon.hidden = true;
+    this.status = status;
+    iconToShow.hidden = false;
+
+    setTimeout(() => {
+      this.status = 'rest';
+      this.copyIcon.hidden = false;
+      iconToShow.hidden = true;
+      this.tooltip.content = this.copyLabel || 'Copy';
+      this.isCopying = false;
+    }, 1500);
+  }
+
+  private async handleCopy() {
+    if (this.isCopying) {
+      return;
+    }
+    this.isCopying = true;
+
+    let valueToCopy = this.value||this.textContent;
+
+    if (this.from) {
+      const root = this.getRootNode() as ShadowRoot | Document;
+
+      const isProperty = this.from.includes('.');
+      const isAttribute = this.from.includes('[') && this.from.includes(']');
+      let id = this.from;
+      let field = '';
+
+      if (isProperty) {
+        [id, field] = this.from.trim().split('.');
+      } else if (isAttribute) {
+        [id, field] = this.from.trim().replace(/]$/, '').split('[');
+      }
+
+      const target = 'getElementById' in root ? root.getElementById(id) : null;
+
+      if (target) {
+        if (isAttribute) {
+          valueToCopy = target.getAttribute(field) || '';
+        } else if (isProperty) {
+          // @ts-expect-error Not really an error tbh.
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          valueToCopy = target[field] || '';
+        } else {
+          valueToCopy = target.textContent || '';
+        }
+      } else {
+        console.error("No target element found with id:", id);
+        this.showStatus('error');
+        this.emit('zn-error');
+      }
+    }
+
+    if (!valueToCopy) {
+      console.error('No value to copy. Please provide a value or a valid "from" attribute.');
+      await this.showStatus('error');
+      this.emit('zn-error');
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(valueToCopy);
+      await this.showStatus('success');
+      this.emit('zn-copy', {
+        detail: {
+          value: valueToCopy
+        }
+      })
+    } catch (error) {
+      console.error('Failed to copy text: ', error);
+      await this.showStatus('error');
+      this.emit('zn-error');
+    }
+
+  }
+}

package/src/components/copy-button/copy-button.scss

@@ -0,0 +1,47 @@
+@use "../../wc";
+
+:host {
+  display: inline-block;
+}
+
+slot {
+  display: inline-flex;
+}
+
+.copy-button {
+  &--success {
+    // color: rgb(var(--zn-color-success));
+  }
+
+  &--error {
+    // color: rgb(var(--zn-color-error));
+  }
+}
+
+.copy-button__button {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  font-size: inherit;
+  color: inherit;
+  padding: var(--zn-spacing-2x-small);
+  cursor: pointer;
+  transition: color 0.2s;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(var(--zn-primary));
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed !important
+  }
+}
+
+[hidden] {
+  display: none;
+}

package/src/components/copy-button/copy-button.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-copy-button>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-copy-button></zn-copy-button> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/copy-button/index.ts

@@ -0,0 +1,12 @@
+import ZnCopyButton from './copy-button.component';
+
+export * from './copy-button.component';
+export default ZnCopyButton;
+
+ZnCopyButton.define('zn-copy-button');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-copy-button': ZnCopyButton;
+  }
+}