@kubex/zinc 1.0.13 → 1.0.15

package/src/components/note/note.component.ts

@@ -5,6 +5,7 @@ import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
+import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -32,36 +33,19 @@ export default class ZnNote extends ZincElement {
   @property({reflect: true}) date: string = '';
   @property({type: HTMLElement, reflect: true}) body: string = '';
 
-  // Number of lines at which the note body collapses; 0 disables collapsing
-  @property({type: Number, attribute: 'collapse-at-lines', reflect: true}) collapseAtLines: number = 3;
+  private readonly hasSlotController = new HasSlotController(this, 'caption', 'date', '[default]', 'snippet', 'footer');
 
-  // Internal state: whether the body is currently expanded
-  @state() private expanded = false;
+  @state()
+  private expanded: boolean = false;
 
-  private _toggleExpand = () => {
+  private _toggleExpand(): void {
     this.expanded = !this.expanded;
-    this.updateComplete.then(() => this._measureOverflow());
-  }
-
-  private _measureOverflow() {
-    const container = this.shadowRoot?.querySelector('.note__body-container') as HTMLElement | null;
-    if (!container || this.collapseAtLines <= 0) {
-      return;
-    }
-
-    container.style.setProperty('--note-collapse-lines', String(this.collapseAtLines));
-    container.classList.toggle('note__body--clamped', !this.expanded);
-  }
-
-  protected firstUpdated() {
-    this._measureOverflow();
-  }
-
-  protected updated() {
-    this._measureOverflow();
   }
 
   protected render(): unknown {
+    const showExpandableButton: boolean = this.hasSlotController.test('snippet')
+      && this.hasSlotController.test('[default]');
+
     return html`
       <div class="${classMap({
         'note': true,
@@ -80,15 +64,18 @@ export default class ZnNote extends ZincElement {
           <slot name="date" class="note__header__date">
             <small>${this.date}</small>
           </slot>
-          <slot name="action"></slot>
-        </div>
-        <div class="${classMap({
-          'note__body-container': true,
-          'note__body--clamped': this.collapseAtLines > 0 && !this.expanded
-        })}" style="--note-collapse-lines: ${this.collapseAtLines}">
-          <slot class="note__body"></slot>
         </div>
-        ${this.collapseAtLines > 0 ? html`
+
+        ${this.expanded && showExpandableButton ?
+          html`
+            <slot class="note__body"></slot>` :
+          html`
+            <slot name="snippet" class="note__snippet"></slot>`}
+
+        ${!showExpandableButton ? html`
+          <slot class="note__body"></slot>` : ' '}
+
+        ${!showExpandableButton ? '' : html`
           <div class="note__toggle">
             <zn-button color="transparent"
                        size="content"
@@ -97,8 +84,7 @@ export default class ZnNote extends ZincElement {
                        aria-expanded="${String(this.expanded)}">
               ${this.expanded ? 'Show less' : 'Show more'}
             </zn-button>
-          </div>
-        ` : ''}
+          </div>`}
         <slot name="footer" class="note__footer"></slot>
       </div>
     `;

package/src/components/note/note.scss

@@ -64,6 +64,14 @@ $colors: (
     padding: 0;
   }
 
+  &__body--clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--note-collapse-lines, 0);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   @each $name, $color in $colors {
     &--#{'' + $name} {
       .note__header__caption {

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

@@ -90,7 +90,9 @@ export default class ZnTile extends ZincElement {
             <div class="tile__left">
               <slot name="image" part="image" class="tile__image"></slot>
               <div class="tile__content">
-                <p part="caption" class="tile__caption">${this.caption}</p>
+                <p part="caption" class="tile__caption">
+                  <slot name="caption">${this.caption}</slot>
+                </p>
                 <p part="description" class="tile__description">${this.description}</p>
               </div>
             </div>