@kubex/zinc 1.0.4 → 1.0.6

package/src/components/bulk-actions/bulk-actions.component.ts

@@ -1,8 +1,15 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController} from "../../internal/form";
+import {litToHTML} from "../../utilities/lit-to-html";
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
+import ZnButton from "../button";
+import ZnInput from "../input";
+import ZnOption from "../option";
+import ZnSelect from "../select";
+import type {ZnChangeEvent} from "../../events/zn-change";
+import type {ZnInputEvent} from "../../events/zn-input";
 
 import styles from './bulk-actions.scss';
 
@@ -29,7 +36,10 @@ export interface BulkActionItem {
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @dependency zn-button
+ * @dependency zn-input
+ * @dependency zn-option
+ * @dependency zn-select
  *
  * @event zn-event-name - Emitted as an example.
  *
@@ -42,9 +52,15 @@ export interface BulkActionItem {
  */
 export default class ZnBulkActions extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-input': ZnInput,
+    'zn-option': ZnOption,
+    'zn-select': ZnSelect,
+  };
 
   @query('.bulk-actions') container: HTMLDivElement;
-  @query('.add-rule') addRule: HTMLSelectElement;
+  @query('.add-rule') addRule: ZnSelect;
   @query('input#main-input') input: HTMLInputElement;
 
   @property() name: string;
@@ -73,12 +89,13 @@ export default class ZnBulkActions extends ZincElement {
       <div class="${classMap({
         'bulk-actions': true
       })}">
-        <select class="add-rule" @change="${this._addRule}">
-          <option value="">Select Filter</option>
+        <zn-select class="add-rule" placeholder="Select Filter" @zn-change="${this._addRule}">
           ${this.actions.map((item: BulkActionItem) => html`
-            <option value="${item.id}">${item.name.charAt(0).toUpperCase() + item.name.slice(1)}</option>`)}
-        </select>
-        <input id="main-input" name="${this.name}" value="${this.value}" type="hidden">
+            <zn-option value="${item.id}">
+              ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
+            </zn-option>`)}
+        </zn-select>
+        <input id="main-input" name="${this.name}" value="${this.value}" hidden>
       </div>
     `;
   }
@@ -95,8 +112,9 @@ export default class ZnBulkActions extends ZincElement {
     this.value = btoa(JSON.stringify(data));
   }
 
-  private _addRule(event: Event | null, value: string = "") {
-    const id = value ? value : event ? (event.target as HTMLSelectElement).value : '';
+  private _addRule(event: Event | null, value: string = "", pos?: number) {
+    const target = event?.target as ZnSelect;
+    const id = value ? value : target?.value || '';
     if (id === '') return;
 
     const filter = this.actions.find(item => item.id === id);
@@ -109,104 +127,154 @@ export default class ZnBulkActions extends ZincElement {
       value: ''
     });
 
-    const row = document.createElement('div');
-    row.classList.add('query-builder__row');
-    row.id = uniqueId;
-
-    const select = document.createElement('select');
-    this.actions.forEach(item => {
-      const option = document.createElement('option');
-      option.value = item.id;
-      option.text = item.name.charAt(0).toUpperCase() + item.name.slice(1);
-      option.selected = item.id === filter.id;
-      select.appendChild(option);
-    });
-    select.addEventListener('change', (e: Event) => this._changeRule(uniqueId, e));
-    select.classList.add('query-builder__key');
+    const keySelect = html`
+      <zn-select class="query-builder__key"
+                 @zn-change="${(e: ZnChangeEvent) => this._changeRule(uniqueId, e)}"
+                 value="${filter.id}">
+        ${this.actions.map((item: BulkActionItem) => html`
+          <zn-option value="${item.id}">
+            ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
+          </zn-option>
+        `)}
+      </zn-select>
+    `;
 
-    row.appendChild(select);
+    const input = this._createInput(uniqueId, filter);
+
+    const remove = html`
+      <zn-button class="query-builder__remove"
+                 icon="delete"
+                 icon-size="24"
+                 color="transparent"
+                 size="square"
+                 @click="${(e: Event) => this._removeRule(uniqueId, e)}">
+      </zn-button>`;
+
+    const wrapper = html`
+      <div class="query-builder__wrapper">
+        ${input}
+        ${remove}
+      </div>
+    `;
 
-    let input: HTMLSelectElement | HTMLInputElement | HTMLDivElement;
-    if (filter.options) {
-      input = document.createElement('select');
-      const options = Object.keys(filter.options);
-      options.forEach((item: string) => {
-        const option = document.createElement('option');
-        option.value = item;
-        option.text = filter.options ? (filter.options[item]) : '';
-        input.appendChild(option);
-      });
-      this._updateValue(uniqueId, {target: input});
-      input.addEventListener('change', (e: Event) => this._updateValue(uniqueId, e));
-    } else if (filter.type === 'bool' || filter.type === 'boolean') {
-      input = document.createElement('select');
-      const option1 = document.createElement('option');
-      option1.value = '1';
-      option1.text = 'True';
-      input.appendChild(option1);
-      const option2 = document.createElement('option');
-      option2.value = '0';
-      option2.text = 'False';
-      input.appendChild(option2);
-      input.addEventListener('change', (e: Event) => this._updateValue(uniqueId, e));
-    } else if (filter.type === 'number') {
-      input = document.createElement('input');
-      input.setAttribute('type', 'number');
-      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
-    } else if (filter.type === 'date') {
-      input = document.createElement('input');
-      input.setAttribute('type', 'date');
-      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+    const rowElement = html`
+      <div id="${uniqueId}" class="query-builder__row">
+        ${keySelect}
+        ${wrapper}
+      </div>
+    `;
+
+    const row = litToHTML<HTMLDivElement>(rowElement);
+    if (!row) return;
+
+    if (pos !== undefined) {
+      this.container.insertBefore(row, this.container.children[pos]);
     } else {
-      input = document.createElement('input');
-      input.setAttribute('type', 'text');
-      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+      this.container.insertBefore(row, this.addRule);
     }
 
-    input.classList.add('query-builder__value');
-    const wrapper = document.createElement('div');
-    wrapper.classList.add('query-builder__wrapper');
-    wrapper.appendChild(input);
-    row.appendChild(wrapper);
-
-    const remove = document.createElement('zn-button');
-    remove.setAttribute('icon', 'delete');
-    remove.setAttribute('icon-size', '24');
-    remove.setAttribute('color', 'transparent');
-    remove.setAttribute('size', 'square');
-    remove.addEventListener('click', (e: Event) => this._removeRule(uniqueId, e));
-    remove.classList.add('query-builder__remove');
-    row.appendChild(remove);
-
-    this.container.insertBefore(row, this.addRule);
+    // Reset back to default placeholder
     this.addRule.value = '';
+    this.addRule.displayLabel = '';
+    if (this.addRule.selectedOptions?.length) {
+      this.addRule.selectedOptions[0].selected = false;
+    }
+
     this._handleChange();
   }
 
-  private _updateValue(id: string, event: Event | { target: HTMLSelectElement | HTMLInputElement | HTMLDivElement }) {
+  private _createInput(uniqueId: string, filter: BulkActionItem): ZnSelect | ZnInput | null {
+    if (filter.options) {
+      const input = html`
+        <zn-select class="query-builder__value"
+                   @zn-change="${(e: ZnChangeEvent) => this._updateValue(uniqueId, e)}">
+          ${Object.keys(filter.options).map(key => html`
+            <zn-option value="${key}">
+              ${filter.options ? filter.options[key] : ''}
+            </zn-option>
+          `)}
+        </zn-select>`;
+      const el = litToHTML<ZnSelect>(input);
+      if (el) {
+        // initialize with current selection
+        this._updateValue(uniqueId, {target: el} as unknown as Event);
+      }
+      return el;
+    }
+
+    if (filter.type === 'bool' || filter.type === 'boolean') {
+      const input = html`
+        <zn-select class="query-builder__value"
+                   @zn-change="${(e: ZnChangeEvent) => this._updateValue(uniqueId, e)}">
+          <zn-option value="1">True</zn-option>
+          <zn-option value="0">False</zn-option>
+        </zn-select>`;
+      return litToHTML<ZnSelect>(input);
+    }
+
+    if (filter.type === 'number') {
+      const input = html`
+        <zn-input type="number"
+                  class="query-builder__value"
+                  @zn-input="${(e: ZnInputEvent) => this._updateValue(uniqueId, e)}">
+        </zn-input>`;
+      return litToHTML<ZnInput>(input);
+    }
+
+    if (filter.type === 'date') {
+      const input = html`
+        <zn-input type="date"
+                  class="query-builder__value"
+                  @zn-input="${(e: ZnInputEvent) => this._updateValue(uniqueId, e)}">
+        </zn-input>`;
+      return litToHTML<ZnInput>(input);
+    }
+
+    const input = html`
+      <zn-input type="text"
+                class="query-builder__value"
+                @zn-input="${(e: ZnInputEvent) => this._updateValue(uniqueId, e)}">
+      </zn-input>`;
+    return litToHTML<ZnInput>(input);
+  }
+
+  private _updateValue(id: string, event: Event | { target: ZnSelect | ZnInput | HTMLDivElement }) {
     const filter = this._selectedRules.get(id);
     if (!filter) return;
 
-    const input = event.target as HTMLSelectElement | HTMLInputElement;
-    filter.value = input.value;
+    const input = event.target as ZnSelect | ZnInput;
+    filter.value = input.value as string;
 
     this._selectedRules.set(id, filter);
     this._handleChange();
   }
 
-  private _changeRule(id: string, event: Event) {
+  private _getRulePosition(id: string): number {
+    const rules = this.container.querySelectorAll('.query-builder__row');
+    let position: number = -1;
+    rules.forEach((item, index) => {
+      if ((item as HTMLDivElement).id === id) {
+        position = index;
+      }
+    });
+    return position;
+  }
+
+  private _changeRule(id: string, event: ZnChangeEvent) {
     // remove the element from the dom
-    const button = event.target as HTMLSelectElement;
-    button.parentElement?.remove();
+    const pos: number = this._getRulePosition(id);
+    const select = event.target as ZnSelect;
+    select.popup.active = false;
+    select?.parentElement?.remove();
     // recreate the element based on the selected value;
-    this._removeRule(id, event);
-    this._addRule(event);
+    this._removeRule(id, event as unknown as Event);
+    this._addRule(event as unknown as Event, '', pos);
   }
 
   private _removeRule(id: string, event: Event) {
     this._selectedRules.delete(id);
-    const button = event.target as HTMLButtonElement;
-    button.parentElement?.remove();
+    const button = event.target as ZnButton;
+    button?.closest('.query-builder__row')?.remove();
     this._handleChange();
   }
 

package/src/components/bulk-actions/bulk-actions.scss

@@ -40,7 +40,9 @@
   }
 
   &__wrapper {
+    display: flex;
     width: 100%;
+    gap: 10px;
   }
 
   &__date {

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

@@ -59,9 +59,11 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @property({type: Boolean}) grow = false;
   @property({type: Boolean}) square = false;
 
+
   @property({attribute: 'dropdown-closer', type: Boolean}) dropdownCloser = false;
 
   @property({type: Number}) notification: number;
+  @property({attribute: "muted-notifications", type: Boolean}) mutedNotifications = false;
 
   @property() verticalAlign: 'start' | 'center' | 'end';
 
@@ -182,7 +184,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     const isLink = this._isLink();
 
     const icon = this.icon ? html`
-      <zn-icon src="${this.icon}" id="xy2" size="${this.iconSize ? this.iconSize : 16}"
+      <zn-icon part="icon" src="${this.icon}" id="xy2" size="${this.iconSize ? this.iconSize : 16}"
                color="${this.iconColor ? this.iconColor : null}"></zn-icon>` : '';
 
     const tag = isLink ? literal`a` : literal`button`;
@@ -215,7 +217,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--icon-right': this.iconPosition === 'right',
           'button--with-content': this.hasSlotController.test('[default]') || this.content,
           'button--square': this.square,
-          'button--has-notification': this.notification !== undefined && this.notification > 0,
+          'button--has-notification': this.notification !== undefined && this.notification !== 0,
+          'button--muted-notification': this.mutedNotifications || (this.notification !== undefined && this.notification === -2),
+          'button--notification-dot': this.notification !== undefined && this.notification < 0,
         })}"
         type="${ifDefined(this.type)}"
         href="${ifDefined(this.href)}"

package/src/components/button/button.scss

@@ -17,6 +17,7 @@
   @include shared.button;
 
   --btn-color: var(--zn-primary);
+  --notification-color: rgb(var(--zn-color-error));
 
   border-width: 1px;
   border-color: transparent;
@@ -40,6 +41,10 @@
   }
 }
 
+.button.button--muted-notification {
+  --notification-color: rgb(var(--zn-color-info));
+}
+
 .button--has-notification {
   position: relative;
 
@@ -56,7 +61,17 @@
     border-radius: 50%;
     font-size: 10px;
     color: white;
-    background-color: rgb(var(--zn-color-error));
+    background-color: var(--notification-color);
+  }
+}
+
+.button--has-notification.button--notification-dot {
+  &:after {
+    content: '';
+    width: 5px;
+    height: 5px;
+    top: 5px;
+    right: 3px;
   }
 }
 

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

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
 import {property} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
@@ -40,6 +41,8 @@ export default class ZnButtonMenu extends ZincElement {
 
   @property({}) size: 'content' | 'x-small' | 'small' | 'medium' | 'large' = 'medium';
 
+  @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 24;
+
   @property({type: Boolean, attribute: 'no-gap'}) public noGap: boolean;
 
   @property({type: Boolean, attribute: 'no-padding'}) public noPadding: boolean;
@@ -174,6 +177,9 @@ export default class ZnButtonMenu extends ZincElement {
         if (!button.button.hasAttribute('color')) {
           button.button.setAttribute('color', button.button.hasAttribute('primary') ? 'primary' : button.button.hasAttribute('secondary') ? 'secondary' : 'transparent');
         }
+        if (button.button.hasAttribute('primary') || button.button.hasAttribute('secondary')) {
+          button.button.setAttribute('text', "");
+        }
         button.button.setAttribute('size', this.size);
       }
     });
@@ -256,8 +262,9 @@ export default class ZnButtonMenu extends ZincElement {
       }
     }
 
-    // check if there are an zn-confirms attached
-    const confirms: NodeListOf<ZnConfirm> = this.querySelectorAll('zn-confirm');
+    // check if there are any zn-confirms attached
+    // @ts-ignore
+    const confirms: NodeListOf<ZnConfirm> = deepQuerySelectorAll('zn-confirm', this, '');
     confirms.forEach(confirm => {
       confirm.updateTriggers(); // update the triggers for the confirm dialog
     })
@@ -272,7 +279,7 @@ export default class ZnButtonMenu extends ZincElement {
       })}>
         <div class="button-menu__container"></div>
         <zn-dropdown placement="bottom-end">
-          <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent" size="${this.size}"></zn-button>
+          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent" size="${this.size}"></zn-button>
           <zn-menu></zn-menu>
         </zn-dropdown>
         <slot></slot>
@@ -331,21 +338,22 @@ export default class ZnButtonMenu extends ZincElement {
   }
 
   public removeAllButtons() {
-    // remove all buttons that have the zn-button-menu__added class
-    const buttons = this.querySelectorAll('.zn-button-menu__added');
-    buttons.forEach((button: ZnButton) => {
-      button.remove();
-    });
+    const buttons = this.shadowRoot?.querySelectorAll('zn-button.zn-button-menu__added');
+    if (buttons) {
+      buttons.forEach((button: ZnButton) => {
+        button.remove();
+      });
+    }
 
-    // remove all zn-menu-item elements
-    const menuItems = this.shadowRoot?.querySelectorAll('zn-menu-item');
-    menuItems?.forEach((menuItem: ZnMenuItem) => {
-      menuItem.remove();
-    });
+    const menuItems = this.shadowRoot?.querySelectorAll('zn-menu-item.zn-button-menu__added');
+    if (menuItems) {
+      menuItems?.forEach((menuItem: ZnMenuItem) => {
+        menuItem.remove();
+      });
+    }
 
-    // reset the original buttons list
-    this._originalButtons = [];
     this._buttons = [];
+    this._originalButtons = this._originalButtons.filter(b => !b.button.classList.contains('zn-button-menu__added'));
 
     // Recalculate the visible buttons
     this.calculateVisibleButtons();

package/src/components/button-menu/button-menu.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   max-width: 100%;
-  --menu-gap: var(--zn-spacing-x-small);
+  --menu-gap: var(--zn-spacing-2x-small);
 }
 
 .button-menu--no-gap {
@@ -17,7 +17,7 @@
   padding: var(--zn-spacing-small) 0;
   margin: 0;
 
-  min-width: 35px;
+  min-width: 34px;
   max-width: var(--zn-max-width);
 
   gap: var(--menu-gap);
@@ -31,11 +31,11 @@
     flex-direction: row;
     gap: var(--menu-gap);
     margin: 0;
-    max-width: calc(100% - 35px);
+    max-width: calc(100% - 34px);
   }
 
   zn-button {
-    min-width: 35px;
+    min-width: 34px;
     flex-shrink: 0;
   }
 }

package/src/components/chart/chart.component.ts

@@ -1,5 +1,5 @@
-import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ApexCharts from "apexcharts";
 import ZincElement from '../../internal/zinc-element';
 
@@ -26,21 +26,22 @@ export default class ZnChart extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   @property() type: 'area' | 'bar' | 'line' = 'bar';
-  @property({ type: Array }) data: any[] = [];
-  @property({ type: Array }) categories: string | string[] = '';
+  @property({type: Array}) data: any[] = [];
+  @property({type: Array}) categories: string | string[] = '';
 
   @property() xAxis: string;
-  @property({ type: Number, attribute: 'd-size' }) datapointSize: number = 1;
+  @property({type: Number, attribute: 'd-size'}) datapointSize: number = 1;
+  @property({type: Boolean}) stacked = false;
 
   // Live
-  @property({ type: Boolean }) live = false;
-  @property({ attribute: 'data-url' }) dataUrl = '';
-  @property({ attribute: 'live-interval', type: Number }) liveInterval = 1000;
-  @property({ type: Number, reflect: true }) height = 300;
+  @property({type: Boolean}) live = false;
+  @property({attribute: 'data-url'}) dataUrl = '';
+  @property({attribute: 'live-interval', type: Number}) liveInterval = 1000;
+  @property({type: Number, reflect: true}) height = 300;
 
-  @property({ attribute: 'enable-animations', type: Boolean }) enableAnimations = false;
+  @property({attribute: 'enable-animations', type: Boolean}) enableAnimations = false;
 
-  @property({ attribute: 'y-axis-append' }) yAxisAppend: string;
+  @property({attribute: 'y-axis-append'}) yAxisAppend: string;
 
   private chart: ApexCharts;
 
@@ -54,10 +55,11 @@ export default class ZnChart extends ZincElement {
       animations: this.enableAnimations,
       chart: {
         type: this.type,
-        toolbar: { show: false },
+        toolbar: {show: false},
         foreColor: theme == 'dark' ? "rgb(149, 163, 184)" : "rgb(123, 112, 151)",
         height: this.height + 'px',
         fontFamily: '"Inter", sans',
+        stacked: this.stacked,
         zoom: {
           enabled: false
         },

package/src/components/checkbox/checkbox.component.ts

@@ -7,9 +7,9 @@ import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
 import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
+import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
-import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
 
@@ -110,6 +110,10 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     return this.input?.validity;
   }
 
+  get isChecked() {
+    return this.checked;
+  }
+
   /** Gets the validation message */
   get validationMessage() {
     return this.input.validationMessage;

package/src/components/checkbox/checkbox.scss

@@ -57,7 +57,7 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  box-shadow: var(--zn-shadow-medium);
+  box-shadow: var(--zn-shadow-x-small);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
   border-radius: 2px;
   background-color: var(--zn-input-background-color);

package/src/components/chip/chip.component.ts

@@ -40,9 +40,13 @@ export default class ZnChip extends ZincElement {
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
 
   render() {
+    const hasContent = this.hasSlotController.test('[default]')
     return html`
-      <div class=${classMap({
+      <div class="${classMap({
         'chip': true,
+        'chip--with-content': hasContent,
+        'chip--no-content': !hasContent,
+        'chip--with-icon': this.icon,
         'chip--flush': this.flush,
         'chip--flush-x': this.flushX,
         'chip--flush-y': this.flushY,
@@ -57,10 +61,10 @@ export default class ZnChip extends ZincElement {
         'chip--small': this.size === 'small',
         'chip--medium': this.size === 'medium',
         'chip--large': this.size === 'large',
-      })}>
+      })}">
         ${this.icon ? html`
           <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
-        ${this.hasSlotController.test('[default]') ? html`
+        ${hasContent ? html`
           <slot></slot>` : ''}
         ${this.hasSlotController.test('action') ? html`
           <slot name="action" class="chip__action"></slot>` : ''}

package/src/components/chip/chip.scss

@@ -7,7 +7,7 @@
 .chip {
   display: inline-flex;
   border-radius: 7px;
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-3x-small) var(--zn-spacing-x-small);
   text-align: center;
   font-size: 12px;
   gap: 4px;
@@ -99,3 +99,11 @@
   font-size: var(--zn-font-size-large);
   padding: var(--zn-spacing-x-small) var(--zn-spacing-x-large);
 }
+
+.chip--no-content {
+  padding: var(--zn-spacing-3x-small) var(--zn-spacing-2x-small);
+}
+
+.chip--with-icon {
+  padding-left: var(--zn-spacing-2x-small);
+}