@kubex/zinc 1.0.25 → 1.0.98

package/src/components/data-select/providers/currency-data-provider.ts

@@ -312,17 +312,31 @@ const commonCurrencyCodes = [
 ];
 
 const sortedCurrencyCodes = [...Object.keys(currencyCodeToName)].sort((a, b) => a.localeCompare(b));
-const allCurrencyCodes = [...commonCurrencyCodes, ...sortedCurrencyCodes];
-const uniqueCurrencyCodes = Array.from(new Set(allCurrencyCodes));
 
-export const currencyDataProvider: LocalDataProvider<DataProviderOption> = {
-  getName: 'currency',
-  getData: uniqueCurrencyCodes.map((code => {
+export const currencyDataProvider = (allowCommon: boolean = false): LocalDataProvider<DataProviderOption> => {
+  const otherCurrencyCodes = sortedCurrencyCodes.filter(code => !commonCurrencyCodes.includes(code));
+  const currencyCodes = [...commonCurrencyCodes, ...otherCurrencyCodes];
+
+  const data: DataProviderOption[] = currencyCodes.map((code => {
     return {
       key: code,
       value: code.concat(' - ').concat(currencyCodeToName[code]),
       prefix: currencyCodeToSymbol[code] ? currencyCodeToSymbol[code] : ''
     }
-  }))
+  }));
+
+  if (allowCommon) {
+    const commonOption: DataProviderOption = {
+      key: commonCurrencyCodes.join(','),
+      value: 'Common - USD, EUR, GBP, CAD & AUD',
+      prefix: ''
+    };
+    data.unshift(commonOption);
+  }
+
+  return {
+    getName: 'currency',
+    getData: data
+  };
 };
 

package/src/components/data-select/providers/provider.ts

@@ -30,3 +30,4 @@ export * from './country-data-provider';
 export * from './currency-data-provider';
 export * from './color-data-provider';
 export * from './country-code-data-provider';
+export * from './us-state-data-provider';

package/src/components/data-select/providers/us-state-data-provider.ts

@@ -0,0 +1,68 @@
+import type {DataProviderOption, LocalDataProvider} from "./provider";
+
+const usStates: { [key: string]: string } = {
+  "AL": "Alabama",
+  "AK": "Alaska",
+  "AZ": "Arizona",
+  "AR": "Arkansas",
+  "CA": "California",
+  "CO": "Colorado",
+  "CT": "Connecticut",
+  "DE": "Delaware",
+  "FL": "Florida",
+  "GA": "Georgia",
+  "HI": "Hawaii",
+  "ID": "Idaho",
+  "IL": "Illinois",
+  "IN": "Indiana",
+  "IA": "Iowa",
+  "KS": "Kansas",
+  "KY": "Kentucky",
+  "LA": "Louisiana",
+  "ME": "Maine",
+  "MD": "Maryland",
+  "MA": "Massachusetts",
+  "MI": "Michigan",
+  "MN": "Minnesota",
+  "MS": "Mississippi",
+  "MO": "Missouri",
+  "MT": "Montana",
+  "NE": "Nebraska",
+  "NV": "Nevada",
+  "NH": "New Hampshire",
+  "NJ": "New Jersey",
+  "NM": "New Mexico",
+  "NY": "New York",
+  "NC": "North Carolina",
+  "ND": "North Dakota",
+  "OH": "Ohio",
+  "OK": "Oklahoma",
+  "OR": "Oregon",
+  "PA": "Pennsylvania",
+  "RI": "Rhode Island",
+  "SC": "South Carolina",
+  "SD": "South Dakota",
+  "TN": "Tennessee",
+  "TX": "Texas",
+  "UT": "Utah",
+  "VT": "Vermont",
+  "VA": "Virginia",
+  "WA": "Washington",
+  "WV": "West Virginia",
+  "WI": "Wisconsin",
+  "WY": "Wyoming",
+  "DC": "District of Columbia",
+  "AS": "American Samoa",
+  "GU": "Guam",
+  "MP": "Northern Mariana Islands",
+  "PR": "Puerto Rico",
+  "VI": "U.S. Virgin Islands",
+};
+
+export const usStateDataProvider: LocalDataProvider<DataProviderOption> = {
+  getName: 'state',
+  getData: Object.entries(usStates).map(([code, name]) => ({
+    key: code,
+    value: name,
+  }))
+};

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

@@ -7,12 +7,14 @@ import {ref} from "lit/directives/ref.js";
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {type ZnFilterChangeEvent} from "../../events/zn-filter-change";
+import {type ZnSearchChangeEvent} from "../../events/zn-search-change";
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from "../button";
 import ZnButtonGroup from "../button-group";
 import ZnChip from "../chip";
 import ZnConfirm from "../confirm";
 import ZnDataTableFilter from "../data-table-filter";
+import ZnDataTableSearch from "../data-table-search";
 import ZnDropdown from "../dropdown";
 import ZnEmptyState from "../empty-state";
 import ZnHoverContainer from "../hover-container";
@@ -69,6 +71,7 @@ export enum ActionSlots {
   filter = 'filter',
   filter_top = 'filter-top',
   sort = 'sort',
+  search = 'search',
   inputs = 'inputs'
 }
 
@@ -81,6 +84,8 @@ interface ActionConfig {
   confirmTitle: string;
   confirmContent: string;
   icon: string;
+  iconSrc?: string;
+  color?: string;
   type: string;
 }
 
@@ -102,6 +107,7 @@ interface DataRequest {
   sortColumn: string;
   sortDirection: string;
   filter: string;
+  search: string;
 }
 
 type AllowedInputElement =
@@ -129,11 +135,18 @@ type AllowedInputElement =
  * @dependency zn-button-group
  * @dependency zn-confirm
  * @dependency zn-skeleton
- *
- * @event zn-event-name - Emitted as an example.
+ * @dependency zn-data-table-search
  *
  * @slot - The default slot.
- * @slot example - An example slot.
+ * @slot search - Slot for search component.
+ * @slot sort - Slot for sort component.
+ * @slot filter - Slot for filter component.
+ * @slot filter-top - Slot for top-level filter component.
+ * @slot delete-action - Slot for delete action button.
+ * @slot modify-action - Slot for modify action button.
+ * @slot create-action - Slot for create action button.
+ * @slot inputs - Slot for additional input controls.
+ * @slot empty-state - Slot for custom empty state.
  *
  * @csspart base - The component's base wrapper.
  *
@@ -153,6 +166,7 @@ export default class ZnDataTable extends ZincElement {
     'zn-confirm': ZnConfirm,
     'zn-skeleton': ZnSkeleton,
     'zn-style': ZnStyle,
+    'zn-data-table-search': ZnDataTableSearch,
   };
 
   @property({attribute: 'data-uri'}) dataUri: string;
@@ -161,6 +175,7 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: 'sort-direction'}) sortDirection: string = "asc";
   @property({attribute: 'local-sort', type: Boolean}) localSort: boolean = false;
   @property({attribute: 'filter'}) filter: string = '';
+  @property({attribute: 'search'}) search: string = '';
   @property({attribute: 'wide-column'}) wideColumn: string;
   @property({attribute: 'key'}) key: string = 'id';
   @property({attribute: 'headers', type: Object}) headers: Record<string, HeaderConfig> = {};
@@ -222,13 +237,14 @@ export default class ZnDataTable extends ZincElement {
   private hasSlotController = new HasSlotController(
     this,
     '[default]',
-    'search-action',
+    ActionSlots.search.valueOf(),
     ActionSlots.delete.valueOf(),
     ActionSlots.modify.valueOf(),
     ActionSlots.create.valueOf(),
     ActionSlots.filter.valueOf(),
     ActionSlots.sort.valueOf(),
-    ActionSlots.inputs.valueOf()
+    ActionSlots.inputs.valueOf(),
+    'empty-state'
   );
 
   private _dataTask = new Task(this, {
@@ -248,6 +264,7 @@ export default class ZnDataTable extends ZincElement {
         sortColumn: this.sortColumn,
         sortDirection: this.sortDirection,
         filter: this.filter,
+        search: this.search,
       };
 
       // get all inputs that are in the inputs slot and add them to the
@@ -349,7 +366,8 @@ export default class ZnDataTable extends ZincElement {
       || this.hasSlotController.test(ActionSlots.create.valueOf())
       || this.hasSlotController.test(ActionSlots.sort.valueOf())
       || this.hasSlotController.test(ActionSlots.filter.valueOf())
-      || this.hasSlotController.test(ActionSlots.filter_top.valueOf());
+      || this.hasSlotController.test(ActionSlots.filter_top.valueOf())
+      || this.hasSlotController.test(ActionSlots.search.valueOf());
 
     const hasInputs = this.hasSlotController.test(ActionSlots.inputs.valueOf());
 
@@ -373,7 +391,8 @@ export default class ZnDataTable extends ZincElement {
       }
     });
 
-    this.addEventListener('zn-filter-change', this.changeEventListener);
+    this.addEventListener('zn-filter-change', this.filterChangeListener);
+    this.addEventListener('zn-search-change', this.searchChangeListener);
   }
 
   disconnectedCallback() {
@@ -381,17 +400,55 @@ export default class ZnDataTable extends ZincElement {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
-    this.removeEventListener('zn-filter-change', this.changeEventListener);
+    this.removeEventListener('zn-filter-change', this.filterChangeListener);
+    this.removeEventListener('zn-search-change', this.searchChangeListener);
   }
 
-  changeEventListener = (e: ZnFilterChangeEvent) => {
+  filterChangeListener = (e: ZnFilterChangeEvent) => {
     if (e.target instanceof ZnDataTableFilter) {
       this.filter = (e.target as ZnDataTableFilter).value as string;
       this._dataTask.run().then(r => r);
     }
   }
 
+  searchChangeListener = (e: ZnSearchChangeEvent) => {
+    const target = e.target as ZnDataTableSearch | null;
+    if (target && target.tagName === 'ZN-DATA-TABLE-SEARCH') {
+      this.search = target.value as string;
+
+      // Get form data and search URI from event detail if available
+      if (e.detail) {
+        const {formData, searchUri} = e.detail as { formData?: Record<string, unknown>; searchUri?: string };
+
+        // Merge form data into request params
+        if (formData && typeof formData === 'object') {
+          this.requestParams = {...this.requestParams, ...formData};
+        }
+
+        // Temporarily override dataUri for this search if searchUri is provided
+        if (searchUri) {
+          const originalUri = this.dataUri;
+          this.dataUri = searchUri;
+          this._dataTask.run().then(() => {
+            // Restore original URI after search
+            this.dataUri = originalUri;
+          });
+          return;
+        }
+      }
+
+      this._dataTask.run().then(r => r);
+    }
+  }
+
   emptyState() {
+    if (this.hasSlotController.test('empty-state')) {
+      return html`
+        <div class="table--empty">
+          <slot name="empty-state"></slot>
+        </div>`;
+    }
+
     return html`
       <div class="table--empty">
         <zn-empty-state
@@ -584,6 +641,7 @@ export default class ZnDataTable extends ZincElement {
           ${this.getActions()}
         </div>
         <div class="table__header__right">
+          <slot name="${ActionSlots.search.valueOf()}"></slot>
           <slot name="${ActionSlots.sort.valueOf()}"></slot>
           <slot name="${ActionSlots.filter.valueOf()}"></slot>
         </div>
@@ -1257,14 +1315,12 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private renderActions(row: Row) {
-    if ((row.actions === null || row.actions === undefined) && this.rowHasActions) {
-      // return an empty cell to keep the table structure
-      return html`
-        <td></td>`;
-    }
-
     if (!row.actions || row.actions.length === 0) {
-      return html``;
+      if (this.rowHasActions) {
+        return html`
+          <td></td>`;
+      }
+      return nothing;
     }
 
     return html`
@@ -1288,9 +1344,11 @@ export default class ZnDataTable extends ZincElement {
                               content="${action.confirmContent}"
                               action="${action.uri}"
                               show-loading></zn-confirm>
-                  <zn-menu-item id="${triggerId}" confirm>
-                    ${(action.icon) ? html`
-                      <zn-icon src="${action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                  <zn-menu-item id="${triggerId}"
+                                color="${ifDefined(action.color || nothing)}"
+                                confirm>
+                    ${(action.icon || action.iconSrc) ? html`
+                      <zn-icon src="${action.iconSrc || action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
                     ${action.text}
                   </zn-menu-item>`;
               } else {
@@ -1298,9 +1356,10 @@ export default class ZnDataTable extends ZincElement {
                   <zn-menu-item value="${action.text}"
                                 href="${action.uri}"
                                 gaid="${ifDefined(action.gaid || nothing)}"
-                                data-target="${ifDefined(action.target || nothing)}">
-                    ${(action.icon) ? html`
-                      <zn-icon src="${action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                                data-target="${ifDefined(action.target || nothing)}"
+                                color="${ifDefined(action.color || nothing)}">
+                    ${(action.icon || action.iconSrc) ? html`
+                      <zn-icon src="${action.iconSrc || action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
                     ${action.text}
                   </zn-menu-item>`;
               }

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

@@ -0,0 +1,184 @@
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {FormControlController, validValidityState} from "../../internal/form";
+import {property} from 'lit/decorators.js';
+import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+import ZnInput from "../input";
+import type ZnDataSelect from "../data-select";
+import type ZnQueryBuilder from "../query-builder";
+import type ZnSelect from "../select";
+
+import styles from './data-table-search.scss';
+
+type AllowedInputElement =
+  HTMLInputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement
+  | ZnInput
+  | ZnSelect
+  | ZnDataSelect
+  | ZnQueryBuilder
+
+/**
+ * @summary A search component for data tables.
+ * @documentation https://zinc.style/components/data-table-search
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-input
+ *
+ * @event zn-search-change - Emitted when the search value changes (debounced).
+ *
+ * @slot - The default slot for additional form inputs.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @property {string} name - The name of the search input field (default: "search").
+ * @property {string} value - The current search value.
+ * @property {string} placeholder - The placeholder text for the search input (default: "Search...").
+ * @property {string} helpText - Help text displayed below the search input.
+ * @property {string} searchUri - Optional URI to use for search operations.
+ * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).
+ */
+export default class ZnDataTableSearch extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-input': ZnInput,
+  };
+
+  private _formController: FormControlController = new FormControlController(this, {});
+  private _searchTimeout?: number;
+
+  @property() name: string = "search";
+
+  @property() value: string = "";
+
+  @property() placeholder: string = "Search...";
+
+  @property({attribute: 'help-text'}) helpText: string = "";
+
+  @property({attribute: 'search-uri'}) searchUri: string | undefined;
+
+  @property({type: Number, attribute: 'debounce-delay'}) debounceDelay: number = 350;
+
+  get validationMessage(): string {
+    return '';
+  }
+
+  get validity(): ValidityState {
+    return validValidityState;
+  }
+
+  checkValidity(): boolean {
+    return true;
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this._formController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return true;
+  }
+
+  setCustomValidity(): void {
+    this._formController.updateValidity();
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this._formController.updateValidity();
+  }
+
+  /**
+   * Collects form data from slotted input elements
+   */
+  getFormData(): Record<string, any> {
+    const params: Record<string, any> = {};
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return params;
+
+    const elements = slot.assignedElements({flatten: true});
+    const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea'];
+
+    elements.forEach((element) => {
+      if (allowedInputs.includes(element.tagName.toLowerCase())) {
+        const input = element as AllowedInputElement;
+        const value = input.value as string || element.getAttribute('value');
+        const name = input.name || element.getAttribute('name');
+        if (name) {
+          params[name] = value;
+        }
+      }
+    });
+
+    return params;
+  }
+
+  handleInput = (e: Event) => {
+    const input = e.target as ZnInput;
+    this.value = input.value as string;
+    this._formController.updateValidity();
+
+    if (this._searchTimeout) {
+      window.clearTimeout(this._searchTimeout);
+    }
+
+    this._searchTimeout = window.setTimeout(() => {
+      this.emitSearchChange();
+    }, this.debounceDelay);
+  }
+
+  handleClear = () => {
+    if (this._searchTimeout) {
+      window.clearTimeout(this._searchTimeout);
+    }
+
+    this.value = "";
+    const input = this.shadowRoot?.querySelector('zn-input');
+    if (input) {
+      input.value = "";
+    }
+    this._formController.updateValidity();
+    this.emitSearchChange();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._searchTimeout) {
+      window.clearTimeout(this._searchTimeout);
+    }
+  }
+
+  /**
+   * Emit the search change event with form data
+   */
+  private emitSearchChange() {
+    const formData = this.getFormData();
+    this.emit('zn-search-change', {
+      detail: {
+        value: this.value,
+        formData: formData,
+        searchUri: this.searchUri
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <div class="data-table-search">
+        <zn-input
+          type="search"
+          name="${this.name}"
+          placeholder="${this.placeholder}"
+          help-text="${this.helpText}"
+          value="${this.value}"
+          clearable
+          @zn-input="${this.handleInput}"
+          @zn-clear="${this.handleClear}">
+          <zn-icon slot="prefix" src="search" size="20"></zn-icon>
+        </zn-input>
+        <slot style="display: none"></slot>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,17 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.data-table-search {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  min-width: 200px;
+}
+
+zn-input::part(form-control-help-text) {
+  font-size: var(--zn-input-help-text-font-size-small);
+  padding-left: var(--zn-spacing-2x-small);
+}

package/src/components/data-table-search/data-table-search.test.ts

@@ -0,0 +1,11 @@
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnDataTableSearch from './data-table-search.component';
+
+describe('<zn-data-table-search>', () => {
+  it('should render a component', async () => {
+    const el = await fixture<ZnDataTableSearch>(html`
+      <zn-data-table-search></zn-data-table-search>`);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/data-table-search/index.ts

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