@kubex/zinc 1.1.50 → 1.1.52

package/docs/pages/components/inline-edit.md

@@ -54,6 +54,47 @@ Use the `edit-text` attribute to customize the edit button text instead of showi
 </div>
 ```
 
+### Masked Values
+
+Use the `display-value` attribute to mask sensitive data at rest. The masked value is shown in place of the input and
+the real value is revealed on hover (via [`zn-reveal`](/components/reveal)). Clicking the field or the edit button
+switches to the normal inline edit flow, and the real `value` — never the mask — is what gets edited and submitted.
+
+```html:preview
+<div class="form-spacing">
+  <zn-inline-edit name="email"
+                  value="john.doe@example.com"
+                  display-value="j***@example.com">
+  </zn-inline-edit>
+
+  <zn-inline-edit name="phone"
+                  value="555-123-1234"
+                  display-value="•••-•••-1234">
+  </zn-inline-edit>
+</div>
+```
+
+:::tip
+Show enough context in the mask (e.g. the email domain or last 4 digits) so users know what they're looking at before
+revealing. The component doesn't re-mask automatically after a save — update `display-value` in your `zn-submit`
+handler once the server confirms the change.
+:::
+
+### Clear on Edit
+
+Add the `clear-on-edit` attribute to start editing with an empty input instead of the current value — useful for
+secrets where the real value shouldn't be pre-filled. Cancelling (or clicking outside without typing) restores the
+original value.
+
+```html:preview
+<zn-inline-edit name="api-key"
+                value="sk_live_1234567890abcdef"
+                display-value="sk_live_••••••••••••••••"
+                clear-on-edit
+                style="font-family: monospace;">
+</zn-inline-edit>
+```
+
 ### Textarea Input Type
 
 Use `input-type="textarea"` for multi-line text content.

package/docs/pages/components/reveal.md

@@ -149,6 +149,22 @@ Without a duration or with hover, the content is revealed only while hovering an
 </p>
 ```
 
+### Disabling Click Toggle
+
+Add the `no-toggle` attribute to disable click-to-toggle entirely — the value is only revealed on hover. Clicks still
+bubble, so a parent component can handle them (this is how [`zn-inline-edit`](/components/inline-edit#masked-values)
+uses click to enter edit mode).
+
+```html:preview
+<zn-reveal no-toggle
+           initial="j***@example.com"
+           revealed="john.doe@example.com">
+</zn-reveal>
+<p style="font-size: 0.875rem; color: var(--zn-color-neutral-600); margin-top: 0.5rem;">
+  Hover to reveal — clicking does nothing
+</p>
+```
+
 ### Click and Hover Combined
 
 When duration is set, clicking toggles temporarily while hovering still works. After clicking, the content remains revealed for the duration, and hovering won't hide it until the duration expires.

package/package.json

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

package/src/components/inline-edit/inline-edit.component.ts

@@ -58,6 +58,18 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property({ attribute: 'edit-text' }) editText: string;
 
+  /**
+   * A masked value (e.g. `j***@example.com`) shown in place of the input when not editing. Hovering reveals the
+   * real value via an embedded `zn-reveal`. The real `value` is still what gets edited and submitted.
+   */
+  @property({ attribute: 'display-value' }) displayValue: string = '';
+
+  /**
+   * When set, the edit input starts empty instead of pre-filled with the current value. Cancelling restores the
+   * original value. Useful with `display-value` when the real value shouldn't be pre-filled into the input.
+   */
+  @property({ type: Boolean, attribute: 'clear-on-edit' }) clearOnEdit: boolean = false;
+
   @property() conditional = '';
 
   @property({ type: Boolean }) disabled: boolean
@@ -131,6 +143,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   @state() private isEditing: boolean;
 
   private _valueBeforeEdit: string | string[];
+  private _editStartValue: string | string[];
 
   @query('.ai__input') input: ZnInput | ZnSelect;
 
@@ -212,11 +225,12 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   mouseEventHandler = (e: MouseEvent) => {
     if (this.isEditing && !this.contains(e.target as Node)) {
       const hasChanged = Array.isArray(this.value)
-        ? JSON.stringify(this.value) !== JSON.stringify(this._valueBeforeEdit)
-        : this.value !== this._valueBeforeEdit;
+        ? JSON.stringify(this.value) !== JSON.stringify(this._editStartValue)
+        : this.value !== this._editStartValue;
 
       if (!hasChanged) {
         this.isEditing = false;
+        this.value = this._valueBeforeEdit;
         this.input.blur();
       }
     }
@@ -260,6 +274,10 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     }
     if (!this.isEditing) {
       this._valueBeforeEdit = this.value;
+      if (this.clearOnEdit) {
+        this.value = this.multiple ? [] : '';
+      }
+      this._editStartValue = this.value;
     }
     this.isEditing = true;
   }
@@ -352,9 +370,15 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         'ai--disabled': this.disabled,
         'ai--inline': this.inline,
         'ai--padded': this.padded,
+        'ai--masked': !!this.displayValue,
       })}" dir="ltr">
 
         <div class="ai__left" @click="${this.disabled ? undefined : this.handleEditClick}">
+          ${this.displayValue && !this.isEditing ? html`
+            <zn-reveal class="ai__reveal"
+                       initial="${this.displayValue}"
+                       revealed="${Array.isArray(this.value) ? this.value.join(' ') : this.value}"
+                       no-toggle></zn-reveal>` : ''}
           ${input}
         </div>
 

package/src/components/inline-edit/inline-edit.scss

@@ -127,6 +127,26 @@
     width: 100%;
   }
 
+  &--masked:not(.ai--editing) {
+    .ai__input {
+      display: none;
+    }
+  }
+
+  &__reveal {
+    line-height: var(--zn-line-height-looser);
+    color: rgb(var(--zn-text));
+
+    // Fill the row so hovering anywhere over the field reveals the value
+    &::part(base) {
+      width: 100%;
+      text-decoration: underline;
+      text-decoration-style: dashed;
+      text-decoration-color: rgb(var(--zn-primary), 0.5);
+      text-underline-offset: 3px;
+    }
+  }
+
   &:not(.ai--disabled) {
     .ai__left {
       cursor: pointer;
@@ -162,6 +182,10 @@
       border-radius: 0;
     }
 
+    .ai__reveal::part(base) {
+      text-decoration: none;
+    }
+
     .ai__input::part(display-input) {
       cursor: text;
     }

package/src/components/inline-edit/inline-edit.test.ts

@@ -370,4 +370,117 @@ describe('<zn-inline-edit>', () => {
 
     expect(el.value).to.equal('a b');
   });
+
+  // -- Masked display value --
+
+  it('should render a zn-reveal with the masked and real values when display-value is set', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="real@example.com" display-value="*****@example.com"></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const reveal = el.shadowRoot!.querySelector('zn-reveal')!;
+    expect(reveal).to.exist;
+    expect(reveal.getAttribute('initial')).to.equal('*****@example.com');
+    expect(reveal.getAttribute('revealed')).to.equal('real@example.com');
+  });
+
+  it('should not render a zn-reveal when display-value is not set', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit value="hello"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('zn-reveal')).to.not.exist;
+  });
+
+  it('should enter edit mode and hide the zn-reveal when the masked display is clicked', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="real@example.com" display-value="*****@example.com"></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const reveal = el.shadowRoot!.querySelector('zn-reveal')!;
+    reveal.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.ai--editing')).to.exist;
+    expect(el.shadowRoot!.querySelector('zn-reveal')).to.not.exist;
+  });
+
+  it('should not enter edit mode from the masked display when disabled', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="real@example.com" display-value="*****@example.com" disabled></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const reveal = el.shadowRoot!.querySelector('zn-reveal')!;
+    reveal.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.ai--editing')).to.not.exist;
+  });
+
+  it('should submit the real value, not the display-value, in form data', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <zn-inline-edit name="email" value="real@example.com" display-value="*****@example.com"></zn-inline-edit>
+      </form>
+    `);
+    const el = form.querySelector<ZnInlineEdit>('zn-inline-edit')!;
+    await el.updateComplete;
+
+    const formData = new FormData(form);
+    expect(formData.get('email')).to.equal('real@example.com');
+  });
+
+  // -- clear-on-edit --
+
+  it('should start with an empty input when clear-on-edit is set', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="real@example.com" clear-on-edit></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot!.querySelector<HTMLElement>('.button--edit')!;
+    editBtn.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('');
+  });
+
+  it('should restore the original value on cancel when clear-on-edit is set', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="real@example.com" clear-on-edit></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot!.querySelector<HTMLElement>('.button--edit')!;
+    editBtn.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    const cancelBtn = el.shadowRoot!.querySelector<HTMLElement>('zn-button[icon="close"]')!;
+    cancelBtn.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.ai--editing')).to.not.exist;
+    expect(el.value).to.equal('real@example.com');
+  });
+
+  it('should auto-cancel and restore the value on outside click when clear-on-edit is set and nothing was typed', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="real@example.com" clear-on-edit></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot!.querySelector<HTMLElement>('.button--edit')!;
+    editBtn.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    document.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.ai--editing')).to.not.exist;
+    expect(el.value).to.equal('real@example.com');
+  });
 });

package/src/components/reveal/reveal.component.ts

@@ -41,6 +41,9 @@ export default class ZnReveal extends ZincElement {
 
   @property({type: Number, attribute: 'hide-delay'}) hideDelay: number = 150;
 
+  /** Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent. */
+  @property({type: Boolean, attribute: 'no-toggle'}) noToggle: boolean = false;
+
   private _isRevealed: boolean = false;
   private _isToggled: boolean = false;
   private _hideTimer?: ReturnType<typeof setTimeout>;
@@ -58,6 +61,8 @@ export default class ZnReveal extends ZincElement {
   }
 
   protected handleToggleReveal() {
+    if (this.noToggle) return;
+
     this._clearHideTimer();
 
     if (this.duration) {
@@ -98,7 +103,8 @@ export default class ZnReveal extends ZincElement {
 
   render() {
     return html`
-      <div class=${classMap({
+      <div part="base"
+           class=${classMap({
         'reveal': true,
         'reveal--revealed': this._isRevealed,
         'reveal--toggled': this._isToggled,

package/src/components/reveal/reveal.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnReveal from './reveal.component';
 
 describe('<zn-reveal>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,28 @@ describe('<zn-reveal>', () => {
 
     expect(el).to.exist;
   });
+
+  it('should toggle the revealed state on click by default', async () => {
+    const el = await fixture<ZnReveal>(html`
+      <zn-reveal initial="****" revealed="real"></zn-reveal>
+    `);
+    const container = el.shadowRoot!.querySelector<HTMLElement>('.reveal')!;
+
+    container.click();
+    await el.updateComplete;
+
+    expect(container.classList.contains('reveal--revealed')).to.be.true;
+  });
+
+  it('should not toggle on click when no-toggle is set', async () => {
+    const el = await fixture<ZnReveal>(html`
+      <zn-reveal initial="****" revealed="real" no-toggle></zn-reveal>
+    `);
+    const container = el.shadowRoot!.querySelector<HTMLElement>('.reveal')!;
+
+    container.click();
+    await el.updateComplete;
+
+    expect(container.classList.contains('reveal--revealed')).to.be.false;
+  });
 });

package/src/components/tile/tile.component.ts

@@ -102,13 +102,15 @@ export default class ZnTile extends ZincElement {
           <div
             class="tile__link">
             <div class="tile__left">
-              ${hasImage ? html`<slot name="image" part="image" class="tile__image"></slot>` : html``}
+              ${hasImage ? html`
+                <slot name="image" part="image" class="tile__image"></slot>` : html``}
               <div class="tile__content">
                 <p part="caption" class="tile__caption">
                   <slot name="caption">${this.caption}</slot>
                 </p>
                 ${hasDescription ? html`
-                  <p part="description" class="tile__description">${this.description}</p>` : ''}
+                  <p part="description" class="tile__description">
+                    ${this.description}</p>` : html`<slot name="description" class="tile__description"></slot>`}
               </div>
             </div>
           </div>
@@ -117,7 +119,8 @@ export default class ZnTile extends ZincElement {
             ${hasProperties ? html`
               <slot name="properties" part="properties" class="tile__properties"></slot>` : ''}
             ${hasActions ? html`
-              <slot name="actions" part="actions" class="tile__actions" @click=${this._handleActionsClick}></slot>` : ''}
+              <slot name="actions" part="actions" class="tile__actions"
+                    @click=${this._handleActionsClick}></slot>` : ''}
           </div>`}
       </${tag}>`;
   }