@kubex/zinc 1.0.12 → 1.0.14

package/src/components/data-table/data-table.scss

@@ -18,6 +18,18 @@ table {
   table-layout: auto;
   text-align: left;
 
+  tbody tr:nth-of-type(even) {
+    background-color: unset !important;
+  }
+
+  tbody tr.table__row--data.table__row--odd:not(.table__row--selected) td {
+    background-color: rgba(var(--zn-body));
+  }
+
+  tbody tr.table__row--details td {
+    background-color: rgb(var(--zn-shadow));
+  }
+
   &.table--standalone {
     background-color: rgb(var(--zn-panel));
     border-radius: var(--zn-border-radius-large);
@@ -34,11 +46,16 @@ table {
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  &.with-hover tbody tr:hover {
+  &.with-hover tbody tr.table__row--data:not(.table__row--selected):hover td {
     background-color: rgba(var(--zn-primary), 0.05) !important;
     cursor: pointer;
   }
 
+  &.with-hover tbody tr.table__row--details:hover {
+    background-color: inherit;
+    cursor: default;
+  }
+
   tbody tr td {
     border-top: 1px solid rgb(var(--zn-border-color)) !important;
   }
@@ -47,10 +64,6 @@ table {
     border-top: 0 !important;
   }
 
-  tbody tr:nth-of-type(even) {
-    background-color: rgba(var(--zn-body));
-  }
-
   thead tr th:first-of-type,
   tbody tr td:first-of-type {
     padding-left: 14px;
@@ -169,6 +182,12 @@ table {
         visibility: hidden;
       }
     }
+
+    &--expander {
+      width: 28px;
+      min-width: 28px;
+      padding-right: 0;
+    }
   }
 
   &__cell {
@@ -232,6 +251,11 @@ table {
         gap: var(--zn-spacing-small);
       }
     }
+
+    &--expander {
+      width: 28px;
+      min-width: 28px;
+    }
   }
 
   &__header {
@@ -306,6 +330,28 @@ table {
       }
     }
   }
+
+  &__details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--zn-spacing-x-large) !important;
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      gap: var(--zn-spacing-2x-small, 4px);
+    }
+
+    &__label {
+      font-size: 12px;
+      color: rgb(var(--zn-text-subtle, var(--zn-text)));
+      opacity: 0.8;
+    }
+
+    &__value {
+      font-size: 14px;
+    }
+  }
 }
 
 .reduced-opacity .table tbody {
@@ -335,10 +381,6 @@ table {
 table tbody tr.table__row--selected {
   background-color: var(--zn-color-purple-100);
 
-  &:nth-of-type(even) {
-    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
-  }
-
   &:hover {
     background-color: var(--zn-color-purple-200) !important;
   }
@@ -393,13 +435,16 @@ table tbody tr.table__row--selected {
       border-bottom-right-radius: 0;
     }
   }
+
+  &.table__row--odd {
+    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
+  }
 }
 
 table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   border-bottom-color: var(--zn-color-purple-600) !important;
 }
 
-
 .table-group__title {
   font-weight: var(--zn-font-weight-semibold);
   font-size: var(--zn-font-size-large);
@@ -411,3 +456,4 @@ table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+

package/src/components/dropdown/dropdown.component.ts

@@ -6,6 +6,7 @@ import {property, query} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {waitForEvent} from "../../internal/event";
 import {watch} from '../../internal/watch';
+import topLayerManager from '../../utilities/top-layer-manager';
 import ZincElement from '../../internal/zinc-element';
 import type {ZnSelectEvent} from "../../events/zn-select";
 import type ZnButton from "../button";
@@ -324,6 +325,7 @@ export default class ZnDropdown extends ZincElement {
 
     if (this.open) {
       this.emit('zn-show');
+      topLayerManager.registerDropdown(this);
       this.addOpenListeners();
       this.panel.hidden = false;
       this.popup.active = true;
@@ -331,6 +333,7 @@ export default class ZnDropdown extends ZincElement {
       this.emit('zn-after-show');
     } else {
       this.emit('zn-hide');
+      topLayerManager.unregisterDropdown(this);
       this.removeOpenListeners();
       this.panel.blur();
       this.panel.hidden = true;

package/src/components/editor/editor.component.ts

@@ -374,7 +374,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   }
 
   private _handleTextChange() {
-    this.value = this.quillElement.root.innerHTML;
+    this.value = this.quillElement.getSemanticHTML();
     this.editorHtml.value = this.value;
     this.emit('zn-change');
   }

package/src/components/filter-container/filter-container.component.ts

@@ -0,0 +1,112 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './filter-container.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/filter-container
+ * @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 ZnFilterContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() attr = 'filter';
+
+  public handleSearchChange(event: Event) {
+    // get all element that have data-'this.attr' attribute
+    const filterableElements = this.querySelectorAll(`[data-${this.attr}]`);
+    const input = event.target as HTMLInputElement;
+    const searchTerm = input.value.toLowerCase();
+
+    filterableElements.forEach((el) => {
+      const filterValue = el.getAttribute(`data-${this.attr}`)?.toLowerCase() || '';
+      if (filterValue.includes(searchTerm)) {
+        (el as HTMLElement).style.display = '';
+      } else {
+        (el as HTMLElement).style.display = 'none';
+      }
+
+      const panel = el.closest('zn-panel');
+      if (panel) {
+        const panelItems = panel.querySelectorAll(`[data-${this.attr}]`);
+        let anyVisible = false;
+        panelItems.forEach((item) => {
+          if ((item as HTMLElement).style.display !== 'none') {
+            anyVisible = true;
+          }
+
+        });
+        if (anyVisible) {
+          (panel as HTMLElement).style.display = '';
+        } else {
+          (panel as HTMLElement).style.display = 'none';
+        }
+      }
+
+      const accordionItem = el.closest('zn-accordion');
+      if (accordionItem) {
+        const itemElements = accordionItem.querySelectorAll(`[data-${this.attr}]`);
+        let anyVisible = false;
+        itemElements.forEach((item) => {
+          if ((item as HTMLElement).style.display !== 'none') {
+            anyVisible = true;
+          }
+        });
+
+        if (anyVisible) {
+          (accordionItem as HTMLElement).style.display = '';
+        }
+      }
+    });
+
+    if (searchTerm === '') {
+      filterableElements.forEach((el) => {
+        (el as HTMLElement).style.display = '';
+      });
+    }
+
+    // if nothing is visible, show a "no results found" message
+    const anyVisibleElements = Array.from(filterableElements).some((el) => {
+      return (el as HTMLElement).style.display !== 'none';
+    });
+
+    let noResultsMessage = this.querySelector('.no-results-message') as HTMLElement;
+    if (!anyVisibleElements) {
+      if (!noResultsMessage) {
+        noResultsMessage = document.createElement('div');
+        noResultsMessage.className = 'no-results-message';
+        noResultsMessage.textContent = 'No results found';
+        this.appendChild(noResultsMessage);
+      }
+      noResultsMessage.style.display = '';
+    } else {
+      if (noResultsMessage) {
+        noResultsMessage.style.display = 'none';
+      }
+    }
+
+  }
+
+  render() {
+    return html`
+      <zn-input placeholder="Filter" clearable type="search" @zn-input=${this.handleSearchChange}
+                style="margin-bottom: var(--zn-spacing-small)">
+        <zn-icon src="search" slot="prefix"></zn-icon>
+      </zn-input>
+      <slot></slot> `;
+  }
+}

package/src/components/filter-container/filter-container.scss

@@ -0,0 +1,5 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}

package/src/components/filter-container/filter-container.test.ts

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

package/src/components/filter-container/index.ts

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

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -47,7 +47,7 @@ export default class ZnFilterWrapper extends ZincElement {
     event.preventDefault();
     const dataTable: ZnDataTable | null = this.closest('zn-data-table');
     if (dataTable) {
-      const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-data-select', 'input', 'select', 'textarea'];
+      const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-data-select', 'zn-datepicker', 'input', 'select', 'textarea'];
       const inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
       const params: Record<string, any> = {};
       inputs.forEach(input => {

package/src/components/form-group/form-group.component.ts

@@ -35,7 +35,6 @@ export default class ZnFormGroup extends ZincElement {
   /** The form groups help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({attribute: 'help-text'}) helpText = '';
 
-
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
@@ -57,32 +56,33 @@ export default class ZnFormGroup extends ZincElement {
         aria-describedby="help-text">
 
         <zn-cols layout="1,2" mc="2" part="form-control-container" class="form-control__container">
-          <div>
-            <label
-              part="form-control-label"
-              id="label"
-              class="form-control__label"
-              aria-hidden=${hasLabel ? 'false' : 'true'}>
-              <slot name="label">${this.label}</slot>
-              ${hasLabelTooltip
-                ? html`
-                  <zn-tooltip class="form-control--label-tooltip">
-                    <div slot="content">
-                      <slot name="label-tooltip">${this.labelTooltip}</slot>
-                    </div>
-                    <zn-icon src="info"></zn-icon>
-                  </zn-tooltip>`
-                : ''}
-            </label>
+          ${hasLabel ? html`
+            <div>
+              <label
+                part="form-control-label"
+                id="label"
+                class="form-control__label"
+                aria-hidden=${hasLabel ? 'false' : 'true'}>
+                <slot name="label">${this.label}</slot>
+                ${hasLabelTooltip
+                  ? html`
+                    <zn-tooltip class="form-control--label-tooltip">
+                      <div slot="content">
+                        <slot name="label-tooltip">${this.labelTooltip}</slot>
+                      </div>
+                      <zn-icon src="info"></zn-icon>
+                    </zn-tooltip>`
+                  : ''}
+              </label>
 
-            <div
-              part="form-control-help-text"
-              id="help-text"
-              class="form-control__help-text"
-              aria-hidden=${hasHelpText ? 'false' : 'true'}>
-              <slot name="help-text">${this.helpText}</slot>
-            </div>
-          </div>
+              ${hasHelpText ? html`
+                <div
+                  part="form-control-help-text"
+                  id="help-text"
+                  class="form-control__help-text">
+                  <slot name="help-text">${this.helpText}</slot>
+                </div>` : html``}
+            </div>` : html``}
 
           <div part="form-control-input" class="form-control-input">
             <slot></slot>

package/src/components/header/header.scss

@@ -185,6 +185,7 @@
     }
   }
 
+
   .caption {
     flex-grow: 1;
     display: flex;
@@ -254,3 +255,9 @@
     display: flex;
   }
 }
+
+:host([baseless]) {
+  .header {
+    border-bottom: none !important;
+  }
+}

package/src/components/navbar/navbar.scss

@@ -100,6 +100,10 @@ ul.navbar {
   }
 }
 
+:host([panel]) {
+  background: rgb(var(--zn-panel));
+}
+
 :host([icon-bar]) {
 
   ul.navbar {

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

@@ -80,6 +80,7 @@ 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,

package/src/components/option/option.component.ts

@@ -140,15 +140,15 @@ export default class ZnOption extends ZincElement {
         })}
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
         <zn-icon
           part="checked-option-icon"
           class="option__check"
           src="check_small"
           aria-hidden="true"
         ></zn-icon>
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
       </div>
     `;
   }

package/src/components/option/option.scss

@@ -20,19 +20,11 @@
   line-height: var(--zn-line-height-normal);
   letter-spacing: var(--zn-letter-spacing-normal);
   color: var(--zn-input-color);
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large) var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
   transition: var(--zn-transition-fast) fill;
   cursor: pointer;
 }
 
-.option--singular:not(.option--selected) {
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large) var(--zn-spacing-x-small) var(--zn-spacing-large);
-
-  zn-icon {
-    display: none;
-  }
-}
-
 
 .option--hover:not(.option--current):not(.option--disabled) {
   background-color: var(--zn-color-primary-100);
@@ -73,6 +65,10 @@
   visibility: visible;
 }
 
+.option--selected {
+  background-color: var(--zn-color-primary-200);
+}
+
 .option__prefix,
 .option__suffix {
   flex: 0 0 auto;

package/src/components/progress-bar/progress-bar.component.ts

@@ -1,5 +1,5 @@
-import {property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './progress-bar.scss';

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

@@ -1,9 +1,9 @@
-import {property} from 'lit/decorators.js';
+import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './progress-tile.scss';
-import {classMap} from "lit/directives/class-map.js";
 
 /**
  * @summary Short summary of the component's intended use.

package/src/components/reveal/index.ts

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

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

@@ -0,0 +1,92 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './reveal.scss';
+import {classMap} from "lit/directives/class-map.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/reveal
+ * @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.
+ *
+ * @usage
+ * ```html
+ * <zn-reveal duration="3000"
+ *            initial="******@hotmail.com"
+ *            revealed="john.doe@hotmail.com" toggle>
+ * </zn-reveal>
+ * ```
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnReveal extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Number}) duration: number = 2000;
+
+  @property() initial: string = '';
+
+  @property() revealed: string = '';
+
+  private _isRevealed: boolean = false;
+  private _isToggled: boolean = false;
+
+  protected handleToggleReveal() {
+    if (this.duration) {
+      this._isRevealed = true;
+      this._isToggled = true;
+
+      this.requestUpdate();
+
+      setTimeout(() => {
+        this._isRevealed = false;
+        this._isToggled = false;
+        this.requestUpdate();
+      }, this.duration);
+    } else {
+      this._isRevealed = !this._isRevealed;
+      this._isToggled = !this._isToggled;
+      this.requestUpdate();
+    }
+  }
+
+  protected handleMouseEnter() {
+    // handle hover only while hovered
+    this._isRevealed = true;
+    this.requestUpdate();
+  }
+
+  protected handleMouseLeave() {
+    if (this._isToggled) {
+      return;
+    }
+    this._isRevealed = false;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <div class=${classMap({
+        'reveal': true,
+        'reveal--revealed': this._isRevealed,
+        'reveal--toggled': this._isToggled,
+      })}
+           @click="${this.handleToggleReveal}"
+           @mouseenter="${this.handleMouseEnter}"
+           @mouseleave="${this.handleMouseLeave}">
+        ${this._isRevealed ? this.revealed : this.initial}
+      </div>
+    `;
+  }
+}

package/src/components/reveal/reveal.scss

@@ -0,0 +1,18 @@
+@use "../../wc";
+
+:host {
+  display: inline-block;
+  cursor: pointer;
+}
+
+
+.reveal {
+}
+
+.reveal--revealed{
+  // reveal is showing
+}
+
+.reveal--toggled {
+  // reveal has been toggled
+}

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

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