@kubex/zinc 1.0.12 → 1.0.14

package/docs/pages/components/data-select.md

@@ -8,7 +8,7 @@ layout: component
 ```html:preview
 
 <div class="form-spacing">
-  <zn-data-select label="Country" provider="country" name="country"></zn-data-select>
+  <zn-data-select label="Country" provider="country" name="country" multiple></zn-data-select>
   <zn-data-select label="Currency" provider="currency" name="currency"></zn-data-select>
   <zn-data-select label="Color" provider="color" name="color"></zn-data-select>
 </div>

package/docs/pages/components/filter-container.md

@@ -0,0 +1,72 @@
+---
+meta:
+  title: Filter Container
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-filter-container>
+  <zn-sp flush>
+    <zn-panel caption="Section One">
+      <div style="display: flex; flex-direction: column;">
+        <div data-filter="John Doe"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>John Doe</strong>
+          <span>john.doe@zinc.style</span>
+        </div>
+
+        <div data-filter="Gary Smith"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Gary Smith</strong>
+          <span>gary.smith@zinc.style</span>
+        </div>
+
+        <div data-filter="Lisa Wong"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Lisa Wong</strong>
+          <span>lisa.wong@zinc.style</span>
+        </div>
+
+        <div data-filter="Emma Johnson"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Emma Johnson</strong>
+          <span>emma.johnson@zinc.style</span>
+        </div>
+      </div>
+
+    </zn-panel>
+
+    <zn-panel caption="Section Two">
+      <div style="display: flex; flex-direction: column;">
+        <div data-filter="Michael Brown"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Michael Brown</strong>
+          <span>michael.brown@zinc.style</span>
+        </div>
+        <div data-filter="Sophia Davis"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Sophia Davis</strong>
+          <span>sophia.davis@zinc.style</span>
+        </div>
+        <div data-filter="Lisa Wong"
+             style="padding: 10px 0; display: flex; flex-direction: column; border-bottom: 1px solid grey;">
+          <strong>Lisa Wong</strong>
+          <span>lisa.wong@zinc.style</span>
+        </div>
+      </div>
+    </zn-panel>
+  </zn-sp>
+</zn-filter-container>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/filter-wrapper.md

@@ -1,12 +1,12 @@
 ---
 meta:
-  title: Query Wrapper
+  title: Filter Wrapper
   description:
 layout: component
 ---
 
 ```html:preview
-<zn-query-wrapper></zn-query-wrapper>
+<zn-filter-wrapper></zn-filter-wrapper>
 ```
 
 ## Examples

package/docs/pages/components/hover-container.md

@@ -0,0 +1,20 @@
+---
+meta:
+  title: Hover Container
+  description:
+layout: component
+---
+
+```html:preview
+<zn-hover-container></zn-hover-container>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/reveal.md

@@ -0,0 +1,24 @@
+---
+meta:
+  title: Reveal
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-reveal duration="3000"
+           initial="******@hotmail.com"
+           revealed="john.doe@hotmail.com">
+</zn-reveal>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/select.md

@@ -39,6 +39,44 @@ This component works with standard `<form>` elements. Please refer to the sectio
 on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
 :::
 
+### Distinct Selects
+
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-select provider="country" multiple name="country-one" id="country-one" distinct="country-two">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+  <zn-select provider="country" multiple name="country-two" id="country-two" distinct="country-one">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+</div>
+```
+
+### Conditional Selects
+
+
+```html:preview
+
+<div class="form-spacing">
+  <zn-select provider="conditional" multiple name="conditional-one" id="conditional-one" conditional="conditional-two">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+  <zn-select provider="conditional" multiple name="conditional-two" id="conditional-two" conditional="conditional-one">
+    <zn-option value="0">Option 0</zn-option>
+    <zn-option value="1">Option 1</zn-option>
+    <zn-option value="2">Option 2</zn-option>
+  </zn-select>
+</div>
+```
+
 ### Help Text
 
 Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the
@@ -124,7 +162,7 @@ the most common for selects), include an empty option that people can select to
 :::
 
 ```html:preview
-<zn-select label="Clearable multi-choice select" clearable multiple value="option-1 option-2" help-text="For multi-choice selects only, display an icon button to let people clear their selections">
+<zn-select label="Clearable multi-choice select" clearable multiple help-text="For multi-choice selects only, display an icon button to let people clear their selections">
   <zn-option value="option-1">Option 1</zn-option>
   <zn-option value="option-2">Option 2</zn-option>
   <zn-option value="option-3">Option 3</zn-option>

package/docs/pages/components/toggle.md

@@ -6,14 +6,17 @@ layout: component
 ---
 
 ```html:preview
-<zn-toggle on-text="On" off-text="off" label="Renew?"></zn-toggle>
+<zn-toggle></zn-toggle>
 ```
 
 ## Examples
 
-### First Example
+### With Tooltip
 
-TODO
+```html:preview
+
+<zn-toggle on-text="Available" off-text="Unavailable" label="Status"></zn-toggle>
+```
 
 ### Second Example
 

package/package.json

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

package/scss/_root.scss

@@ -6,8 +6,8 @@
 :root {
   // Brand Colors
   --zn-red: 237, 84, 109;
-  --zn-blue: 100, 131, 242;
-  --zn-green: 41, 186, 181;
+  --zn-blue: 100, 117, 242;
+  --zn-green: 43, 192, 145;
   --zn-orange: 255, 136, 0;
   --zn-yellow: 255, 193, 7;
   --zn-indigo: 63, 81, 181;
@@ -18,10 +18,10 @@
   --zn-accent: 71, 214, 214;
 
   // Theme Colors
-  --zn-color-info: 100, 131, 242;
+  --zn-color-info: 100, 117, 242;
   --zn-color-warning: 255, 136, 0;
   --zn-color-error: 237, 84, 109;
-  --zn-color-success: 41, 186, 181;
+  --zn-color-success: 43, 192, 145;
   --zn-color-disabled: 181, 181, 181;
 
   // Common Sizes

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

@@ -5,6 +5,7 @@ import {HasSlotController} from '../../internal/slot';
 import {html, literal} from 'lit/static-html.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, query, queryAll} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
@@ -137,13 +138,18 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     this.teardownAutoClick();
   }
 
+  @watch('autoClick')
+  async handleAutoClickChange(_old: boolean, value: boolean) {
+    if (value) {
+      await this.updateComplete;
+      this.setupAutoClick();
+    } else {
+      this.teardownAutoClick();
+    }
+  }
+
   protected updated(changedProps: Map<string, any>) {
     super.updated(changedProps);
-    if (changedProps.has('autoClick')) {
-      if (this.autoClick) {
-        this.setupAutoClick();
-      }
-    }
     if (this.button) {
       const oldOverlay = this.button.querySelector('.button--loading-fill');
       if (oldOverlay) {

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

@@ -73,52 +73,59 @@ zn-panel:not(.content-block--short) zn-header::part(header-description) {
   display: none;
 }
 
-li[data-list="ordered"] {
-  counter-increment: list-0 1;
+ol {
+  counter-reset: list-0 0;
 }
 
 @supports (counter-set:none) {
-  li[data-list] {
+  ol li, ul li {
     counter-set: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0;
   }
 }
 
-li[data-list=bullet] > .ql-ui:before {
-  content: "•";
+ol, ul {
+  padding: 0;
+  margin: 0;
 }
 
-li[data-list=checked] > .ql-ui:before {
-  content: "☑";
+li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
+  color: #777;
 }
 
-li[data-list=unchecked] > .ql-ui:before {
-  content: "☐";
+li {
+  list-style-type: none;
+  padding-left: 1em;
+  position: relative;
 }
 
-li[data-list="ordered"] > .ql-ui::before {
-  content: counter(list-0) ". ";
+ul > li::before {
+  content: "•";
 }
 
-ol {
-  padding: 0;
-  margin: 0;
+ol > li {
+  counter-increment: list-0;
 }
 
-li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
-  color: #777;
+ol > li::before {
+  content: counter(list-0) ". ";
 }
 
-.ql-ui {
-  position: absolute;
+/* Checkbox list markers */
+li[data-list="checked"]::before {
+  content: "☑";
 }
 
-li {
-  list-style-type: none;
-  padding-left: 1em;
-  position: relative;
+li[data-list="unchecked"]::before {
+  content: "☐";
+}
+
+li[data-list="checked"]::before,
+li[data-list="unchecked"]::before {
+  color: #777;
 }
 
-li > .ql-ui::before {
+ol li::before,
+ul li::before {
   display: inline-block;
   margin-left: -1.5em;
   margin-right: 0.3em;
@@ -126,3 +133,8 @@ li > .ql-ui::before {
   white-space: nowrap;
   width: 1.2em;
 }
+
+li:has(> .ql-ui)::before {
+  content: none;
+  display: none;
+}

package/src/components/data-select/data-select.component.ts

@@ -7,12 +7,12 @@ import {
   emptyDataProvider,
   type LocalDataProvider,
 } from "./providers/provider";
-import {type CSSResultGroup, html, nothing, unsafeCSS, PropertyValues} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController} from "../../internal/form";
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
+import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnSelect from "../select";
 
 import styles from './data-select.scss';
@@ -93,6 +93,8 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
 
   @property({attribute: "icon-only", type: Boolean, reflect: true}) iconOnly = false;
 
+  @property({type: Boolean}) multiple = false;
+
   protected readonly formControlController = new FormControlController(this);
 
   get validationMessage() {
@@ -215,6 +217,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  @zn-clear="${this.handleClear}"
                  @blur=${this.blur}
                  value="${this.value}"
+                 ?multiple=${this.multiple}
                  placeholder="${this.getPlaceholder(localProvider)}"
                  exportparts="combobox,expand-icon,form-control-help-text,form-control-input,display-input">
         ${(this.iconPosition !== 'none' || this.iconOnly) ? html`

package/src/components/data-table/data-table.component.ts

@@ -92,6 +92,7 @@ interface HeaderConfig {
   filterable?: boolean;
   hideHeader?: boolean;
   hideColumn?: boolean;
+  secondary?: boolean;
 }
 
 interface DataRequest {
@@ -252,7 +253,7 @@ export default class ZnDataTable extends ZincElement {
       const params: Record<string, any> = {};
       if (inputs) {
         inputs.forEach((input) => {
-          const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'input', 'select', 'textarea'];
+          const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea'];
           if (allowedInputs.includes(input.tagName.toLowerCase())) {
             const value = (input as AllowedInputElement).value as string || input.getAttribute('value');
             const name = (input as AllowedInputElement).name || input.getAttribute('name');
@@ -289,6 +290,10 @@ export default class ZnDataTable extends ZincElement {
 
   private rowHasActions: boolean = false;
 
+  private _expandedRows: Set<string> = new Set();
+  private _hiddenCells: Map<string, Cell[]> = new Map();
+  private _secondaryHeaders: HeaderConfig[];
+
   requestParams: Record<string, any> = {};
 
   refresh() {
@@ -458,22 +463,40 @@ export default class ZnDataTable extends ZincElement {
   }
 
   public renderTableData(data: any) {
+    // Primary (visible) headers exclude those explicitly hidden and those marked as secondary
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
-      if (header.hideHeader || header.hideColumn) {
-        return false;
-      }
-      return !Object.values(this.hiddenColumns).includes(header.key);
+      if (header.hideHeader || header.hideColumn) return false;
+
+      if (Object.values(this.hiddenColumns).includes(header.key)) return false;
+
+      return !header.secondary;
+    });
+
+    // Secondary headers (shown in expandable details)
+    this._secondaryHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
+      if (header.hideColumn) return false;
+
+      if (Object.values(this.hiddenColumns).includes(header.key)) return false;
+
+      return header.secondary === true;
     });
 
     this.rowHasActions = this._rows.some((row: Row) => row.actions && row.actions.length > 0);
 
-    // To make sure the cells are in the same order as the headers, we need to map them cell.col to heading.key
+    // Compute and store hidden cells per row (secondary items only), and reorder visible cells to match header order
+    const secondaryKeys = new Set(this._secondaryHeaders.map(h => h.key));
+    this._hiddenCells.clear();
+    const visibleRowCells: Map<string, Cell[]> = new Map();
+
     this._rows.forEach((row: Row) => {
+      const originalCells = Array.isArray(row.cells) ? row.cells : [];
       const orderedCells: Cell[] = [];
-      // const unorderedCells = row.cells.filter((c: Cell) => !filteredHeaders.some((h: HeaderConfig) => h.key === c.column));
+
+      const hiddenCells = originalCells.filter((c: Cell) => secondaryKeys.has(c.column));
+      this._hiddenCells.set(row.id, hiddenCells);
 
       filteredHeaders.forEach((header: HeaderConfig) => {
-        const cell = row.cells.find((c: Cell) => c.column === header.key);
+        const cell = originalCells.find((c: Cell) => c.column === header.key);
         if (cell) {
           orderedCells.push(cell);
         } else {
@@ -481,9 +504,12 @@ export default class ZnDataTable extends ZincElement {
         }
       });
 
-      row.cells = orderedCells;//.concat(unorderedCells);
+      visibleRowCells.set(row.id, orderedCells);
     });
 
+    const anyHidden = this.hasHiddenColumns();
+    const colCount = filteredHeaders.length + (this.rowHasActions ? 1 : 0) + (anyHidden ? 1 : 0);
+
     return html`
       <div style="overflow-x: auto">
         <table class="${classMap({
@@ -493,17 +519,27 @@ export default class ZnDataTable extends ZincElement {
         })}">
           <thead>
           <tr>
+            ${anyHidden ? html`
+              <th class="table__head table__head--expander"></th>` : nothing}
             ${filteredHeaders.map((header: HeaderConfig) => this.renderCellHeader(header))}
             ${this.rowHasActions ? html`
               <th></th>` : html``}
           </tr>
           </thead>
           <tbody>
-          ${data.map((row: Row) => html`
-            <tr class="${classMap({'table__row--selected': this.isRowSelected(row)})}">
-              ${row.cells.map((value: Cell, index: number) => this.renderCellBody(index, value))}
-              ${this.rowHasActions ? this.renderActions(row) : null}
-            </tr>`)}
+          ${(data as Row[]).map((row: Row, rowIndex: number) => html`
+            <tr class="${classMap({
+              'table__row--selected': this.isRowSelected(row),
+              'table__row--data': true,
+              'table__row--even': (rowIndex % 2) === 0,
+              'table__row--odd': (rowIndex % 2) === 1,
+            })}" data-row-id="${row.id}">
+              ${anyHidden ? this.renderExpanderCell(row) : nothing}
+              ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value))}
+              ${this.rowHasActions ? this.renderActions(row) : nothing}
+            </tr>
+            ${this._expandedRows.has(row.id) ? this.renderDetailsRow(row, colCount) : nothing}
+          `)}
           </tbody>
         </table>
       </div>
@@ -743,7 +779,7 @@ export default class ZnDataTable extends ZincElement {
       return;
     }
 
-    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr'));
+    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr:not([data-details="true"])'));
     const index = rows.indexOf(parent as HTMLTableRowElement);
     if (index === -1) return;
 
@@ -900,15 +936,24 @@ export default class ZnDataTable extends ZincElement {
 
   private renderCellHeader(header: HeaderConfig) {
     const sortable = !Object.values(this.unsortableHeaders).includes(header.key) && !Object.values(this.hiddenHeaders).includes(header.key) && !this.unsortable;
-    const lastHeader = Object.keys(this.headers).filter((key) => !Object.values(this.hiddenColumns).includes(key)).slice(-1)[0];
-    const lastHeaderKey = lastHeader ? this.headers[lastHeader].key : '';
+
+    // Determine the last visible header considering secondary flags and hidden columns
+    const lastVisibleHeaderKey = Object.values(this.headers)
+      .filter((h: HeaderConfig) => {
+        if (h.hideHeader || h.hideColumn) return false;
+
+        if (Object.values(this.hiddenColumns).includes(h.key)) return false;
+
+        return !h.secondary;
+      })
+      .slice(-1)[0]?.key;
 
     return html`
       <th
         class="${classMap({
           'table__head': true,
           'table__head--wide': header.key === this.wideColumn,
-          'table__head--last': header.key === lastHeaderKey,
+          'table__head--last': header.key === lastVisibleHeaderKey,
           'table__head--hidden': Object.values(this.hiddenHeaders).includes(header.key),
         })}"
         @click="${sortable ? this.updateSort(header.key) : undefined}">
@@ -922,16 +967,13 @@ export default class ZnDataTable extends ZincElement {
 
   private renderCellBody(index: number, value: Cell) {
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
-      if (header.hideHeader || header.hideColumn) {
-        return false;
-      }
-      return !Object.values(this.hiddenColumns).includes(header.key);
-    });
+      if (header.hideHeader || header.hideColumn) return false;
+
+      if (Object.values(this.hiddenColumns).includes(header.key)) return false;
 
-    const headerKeys: string[] = Object.keys(this.headers).filter(
-      (key) => !Object.values(this.hiddenColumns).includes(key)
-    );
-    const headerKey: string = headerKeys[index];
+      return !header.secondary;
+    });
+    const headerKey: string = filteredHeaders[index]?.key;
 
     return html`
       <td
@@ -945,6 +987,65 @@ export default class ZnDataTable extends ZincElement {
       </td>`;
   }
 
+  private hasHiddenColumns(): boolean {
+    return this._secondaryHeaders.length > 0;
+  }
+
+  private renderExpanderCell(row: Row) {
+    const hasHidden = (this._hiddenCells.get(row.id) || []).length > 0;
+    if (!hasHidden) return html`
+      <td class="table__cell table__cell--expander"></td>`;
+
+    const expanded = this._expandedRows.has(row.id);
+    const icon = expanded ? 'expand_more' : 'chevron_right';
+
+    return html`
+      <td class="table__cell table__cell--expander">
+        <zn-button
+          color="transparent"
+          size="x-small"
+          icon="${icon}"
+          icon-size="18"
+          aria-label="${expanded ? 'Collapse row' : 'Expand row'}"
+          @click="${(e: Event) => this.toggleRowExpansion(e, row)}">
+        </zn-button>
+      </td>`;
+  }
+
+  private renderDetailsRow(row: Row, colSpan: number) {
+    const hiddenCells = this._hiddenCells.get(row.id) || [];
+    if (hiddenCells.length === 0) return html``;
+
+    return html`
+      <tr class="table__row--details" data-details="true">
+        <td colspan="${colSpan}">
+          <div class="table__details">
+            ${hiddenCells.map((cell: Cell) => {
+              const header = Object.values(this.headers).find((h: HeaderConfig) => h.key === cell.column);
+              const label = header?.label || this.humanize(cell.column);
+              return html`
+                <div class="table__details__item">
+                  <div class="table__details__label">${label}</div>
+                  <div class="table__details__value">${this.renderCell(cell)}</div>
+                </div>`;
+            })}
+          </div>
+        </td>
+      </tr>`;
+  }
+
+  private toggleRowExpansion(e: Event, row: Row) {
+    e.stopPropagation();
+
+    if (this._expandedRows.has(row.id)) {
+      this._expandedRows.delete(row.id);
+    } else {
+      this._expandedRows.add(row.id);
+    }
+
+    this.requestUpdate();
+  }
+
   private isRowSelected(row: Row): boolean {
     return this.selectedRows.some((r: Row) => r.id === row.id);
   }