@kubex/zinc 1.0.4 → 1.0.6

package/src/components/stat/stat.component.ts

@@ -32,6 +32,7 @@ export default class ZnStatsTile extends ZincElement {
   @property() previous = '0';
   @property() currency = '';
   @property({type: Boolean, attribute: 'show-delta'}) showDelta = false;
+  @property() color: 'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral' = 'primary';
 
   calcPercentageDifference() {
     const previous = parseFloat(this.previous);
@@ -100,7 +101,10 @@ export default class ZnStatsTile extends ZincElement {
 
   render() {
     return html`
-      <div class="${classMap({'stat-tile': true})}">
+      <div class="${classMap({
+        'stat-tile': true,
+        [`stat-tile--${this.color}`]: true
+      })}">
         <div class="container">
           <div class="left">
             <div>

package/src/components/stat/stat.scss

@@ -12,7 +12,6 @@
   }
 
   .caption {
-    color: rgb(var(--zn-primary));
     margin-bottom: var(--zn-spacing-x-small);
     font-size: var(--zn-font-size-medium);
   }
@@ -79,6 +78,30 @@
     }
   }
 
+  &--primary {
+    color: rgb(var(--zn-primary));
+  }
+
+  &--error {
+    color: rgb(var(--zn-color-error));
+  }
+
+  &--info {
+    color: rgb(var(--zn-color-info));
+  }
+
+  &--warning {
+    color: rgb(var(--zn-color-warning));
+  }
+
+  &--success {
+    color: rgb(var(--zn-color-success));
+  }
+
+  &--neutral {
+    color: rgb(var(--zn-text));
+  }
+
   @container (max-width:550px) {
     ::slotted(.zn-col-1) {
       flex-basis: 170px;

package/src/components/style/style.component.ts

@@ -19,6 +19,10 @@ export default class ZnStyle extends ZincElement {
   @property({type: Boolean}) warning = false;
   @property({type: Boolean}) primary = false;
   @property({type: Boolean}) accent = false;
+  @property({type: Boolean}) center = false;
+  @property() font = '';
+  @property() width = '';
+  @property() height = '';
   @property() pad = '';
   @property() margin = '';
   @property({attribute: 'a-margin'}) autoMargin = '';
@@ -47,6 +51,27 @@ export default class ZnStyle extends ZincElement {
       this.classList.toggle('zn-' + this.color, true);
     }
 
+
+    if (this.center) {
+      display = "flex"
+      this.classList.toggle('flex-mid', true);
+      this.classList.toggle('flex-jc', true);
+    }
+
+    if (this.font) {
+      if (this.font === 'mono') {
+        this.classList.toggle('zn-mono', true);
+      }
+    }
+
+    if (this.width === "f") {
+      this.classList.toggle('w-full', true);
+    }
+
+    if (this.height === "f") {
+      this.classList.toggle('h-full', true);
+    }
+
     if (this.border) {
       display = 'inline-block'
       this.classList.toggle('zn-border', true);
@@ -140,7 +165,6 @@ export default class ZnStyle extends ZincElement {
       }
     }
 
-
     this.style.display = display;
   }
 

package/src/components/tabs/tabs.component.ts

@@ -54,6 +54,7 @@ export default class ZnTabs extends ZincElement {
   protected _activeClicks = 0;
   private _panel: Element | null | undefined;
   private _panels: Map<string, Element[]>;
+  private _activeTab: Element | null = null;
   private _tabs: HTMLElement[] = [];
   private _actions: HTMLElement[] = [];
   private _knownUri: Map<string, string> = new Map<string, string>();
@@ -261,6 +262,7 @@ export default class ZnTabs extends ZincElement {
     if (!target.hasAttribute('tab') && target.hasAttribute('tab-uri')) {
       const tabUri: string | null = target.getAttribute("tab-uri") ?? "";
       this._createUriPanel(target, tabUri, this._uriToId(tabUri));
+      target.setAttribute('tab-id', this._uriToId(tabUri));
     }
   }
 
@@ -320,6 +322,9 @@ export default class ZnTabs extends ZincElement {
   }
 
   _setTabEleActive(ele: Element, active: boolean) {
+    if (active) {
+      this._activeTab = ele
+    }
     ele.classList.toggle('zn-tb-active', active);
     ele.classList.toggle('active', active);
   }
@@ -349,8 +354,14 @@ export default class ZnTabs extends ZincElement {
         }
         element.toggleAttribute('selected', isActive);
         if (isActive && refresh) {
+          let uri = "";
+          let gaid = "";
+          if (this._activeTab && this._activeTab.hasAttribute('tab-uri')) {
+            uri = this._activeTab.getAttribute('tab-uri')!;
+            gaid = this._activeTab.getAttribute('gaid')!;
+          }
           document.dispatchEvent(new CustomEvent('zn-refresh-element', {
-            detail: {element: element}
+            detail: {element: element, uri: uri, gaid: gaid}
           }));
         }
       });

package/src/components/textarea/textarea.component.ts

@@ -141,6 +141,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
 
+  @property({type: Boolean}) transparent = false;
 
   /** Gets the validity state object */
   get validity() {
@@ -373,7 +374,8 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
               'textarea--empty': !this.value,
               'textarea--resize-none': this.resize === 'none',
               'textarea--resize-vertical': this.resize === 'vertical',
-              'textarea--resize-auto': this.resize === 'auto'
+              'textarea--resize-auto': this.resize === 'auto',
+              'textarea--transparent': this.transparent
             })}>
             <textarea
               part="textarea"

package/src/components/textarea/textarea.scss

@@ -16,7 +16,7 @@
   align-items: center;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-medium);
+  box-shadow: var(--zn-shadow-x-small);
   font-family: var(--zn-input-font-family);
   font-weight: var(--zn-input-font-weight);
   line-height: var(--zn-line-height-normal);
@@ -79,7 +79,7 @@
   color: var(--zn-input-color);
   border: none;
   background: none;
-  box-shadow: var(--zn-shadow-small);
+  box-shadow: var(--zn-shadow-x-small);
   cursor: inherit;
   -webkit-appearance: none;
   height: 100%;
@@ -150,3 +150,22 @@
   resize: none;
   overflow-y: hidden;
 }
+
+.form-control-input {
+  margin: 0 !important;
+}
+
+.textarea--transparent {
+  background-color: transparent;
+  box-shadow: none !important;
+  border: none !important;
+
+  &:hover {
+    background-color: transparent !important;
+  }
+
+  &.textarea--focused {
+    border: none !important;
+    background-color: transparent !important;
+  }
+}

package/src/components/vertical-stepper/vertical-stepper.scss

@@ -69,7 +69,7 @@
 
 :host([first]) {
   .vs {
-    margin-top: 40px;
+    margin-top: 10px;
   }
 }
 

package/src/internal/form.ts

@@ -267,7 +267,9 @@ export class FormControlController implements ReactiveController {
       setTimeout(() => {
         // disable duplicate submit
         submitButton.disabled = true;
-        submitButton.innerHTML = this.form?.getAttribute('data-loading-text') || 'Processing...';
+        submitButton.innerHTML = !this.form?.hasAttribute('data-no-loading-text')
+          ? this.form?.getAttribute('data-loading-text') || 'Processing...'
+          : content;
       }, 20);
     }
 

package/src/internal/slot.ts

@@ -1,4 +1,4 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type {ReactiveController, ReactiveControllerHost} from 'lit';
 
 /** A reactive controller that determines when slots exist. */
 export class HasSlotController implements ReactiveController {
@@ -55,6 +55,32 @@ export class HasSlotController implements ReactiveController {
     return this.host.querySelector(`:scope > [slot="${slotName}"]`)!;
   }
 
+  getDefaultSlot() {
+    // Get all child nodes that do not have a slot attribute
+    return [...this.host.childNodes].filter(node => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {
+        return true;
+      }
+
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        const tagName = el.tagName.toLowerCase();
+
+        // Ignore visually hidden elements since they aren't rendered
+        if (tagName === 'zn-visually-hidden') {
+          return false;
+        }
+
+        // If it doesn't have a slot attribute, it's part of the default slot
+        if (!el.hasAttribute('slot')) {
+          return true;
+        }
+      }
+
+      return false;
+    }) as HTMLElement[];
+  }
+
   getSlots(slotName: string) {
     return this.host.querySelectorAll(`:scope > [slot="${slotName}"]`) as NodeListOf<HTMLElement>;
   }
@@ -73,7 +99,7 @@ export class HasSlotController implements ReactiveController {
  * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
  */
 export function getInnerHTML(slot: HTMLSlotElement): string {
-  const nodes = slot.assignedNodes({ flatten: true });
+  const nodes = slot.assignedNodes({flatten: true});
   let html = '';
 
   [...nodes].forEach(node => {
@@ -97,7 +123,7 @@ export function getTextContent(slot: HTMLSlotElement | undefined | null): string
   if (!slot) {
     return '';
   }
-  const nodes = slot.assignedNodes({ flatten: true });
+  const nodes = slot.assignedNodes({flatten: true});
   let text = '';
 
   [...nodes].forEach(node => {

package/src/utilities/on.ts

@@ -1,4 +1,4 @@
-type OnEvent = Event & { selectedTarget: EventTarget; path: EventTarget[] };
+export type OnEvent = Event & { selectedTarget: EventTarget; path: EventTarget[] };
 
 interface OnEventListener {
   (evt: OnEvent): void;
@@ -6,20 +6,19 @@ interface OnEventListener {
 
 export function on(delegate: EventTarget, eventName: string, targetSelector: string, callback: OnEventListener) {
   function _fn(e: OnEvent) {
-    const path = e.path || (e.composedPath?.());
-    let t: Element | null = (path?.[0] || e.target) as Element;
-    do {
-      if (!targetSelector || (t.matches && t.matches(targetSelector))) {
-        e.selectedTarget = t;
+    const path = e.composedPath?.() || e.path || [e.target];
+
+    for (const node of path) {
+      if (node instanceof Element && node.matches(targetSelector)) {
+        e.selectedTarget = node;
         return callback(e);
       }
 
       // stop traversing up the dom once we reach the delegate
-      if (delegate === t) {
+      if (node === delegate) {
         break;
       }
     }
-    while ((t = t.parentElement));
 
     return false;
   }

package/src/utilities/query.ts

@@ -2,8 +2,12 @@ export function deepQuerySelectorAll(selector: string, element: Element, stopSel
   const arr: Element[] = [];
 
   const traverser = (node: Element, sub: boolean) => {
+    if (!node) {
+      return;
+    }
+
     // 1. decline all nodes that are not elements
-    if (node.nodeType !== Node.ELEMENT_NODE || (sub && stopSelector && node.matches(stopSelector))) {
+    if ((node.nodeType !== Node.ELEMENT_NODE) || (sub && stopSelector && node.matches(stopSelector))) {
       return;
     }
 

package/src/wc.scss

@@ -31,3 +31,10 @@
   max-width: var(--zn-container);
   margin: 0 auto;
 }
+
+.form-container {
+  height: 100%;
+  width: 100%;
+  max-width: var(--zn-container-ph);
+  margin: 0 auto;
+}

package/src/zinc.ts

@@ -46,6 +46,9 @@ export {default as ProgressBar} from './components/progress-bar';
 export {default as OrderTable} from './components/order-table';
 export {default as BulkActions} from './components/bulk-actions';
 export {default as Editor} from './components/editor';
+export {default as EditorTool} from './components/editor/modules/toolbar/tool';
+export {default as EditorQuickAction} from './components/editor/modules/context-menu/quick-action';
+export {default as EditorDialog} from './components/editor/modules/dialog/dialog.component';
 export {default as Toggle} from './components/toggle';
 export {default as Input} from './components/input';
 export {default as Select} from './components/select';
@@ -75,6 +78,8 @@ export {default as SplitButton} from './components/split-button';
 export {default as Skeleton} from './components/skeleton';
 export {default as Style} from './components/style';
 export {default as ContentBlock} from './components/content-block';
+export {default as FilterWrapper} from './components/filter-wrapper';
+export { default as SettingsContainer } from './components/settings-container';
 /* plop:component */
 
 // Utilities

package/src/components/editor/modules/dialog-module/dialog-module.component.ts

@@ -1,289 +0,0 @@
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult, unsafeCSS} from "lit";
-import {property, query, state} from "lit/decorators.js";
-import {repeat} from "lit/directives/repeat.js";
-import {watch} from "../../../../internal/watch";
-import ZincElement from "../../../../internal/zinc-element";
-import type {CannedResponse} from "../../editor.component";
-import type {ZnInputEvent} from "../../../../events/zn-input";
-import type ZnInput from "../../../input";
-
-import styles from './dialog-module.scss';
-
-export default class DialogModuleComponent extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
-
-  @state() private hasFocus = false;
-  @state() private isSearching = false;
-
-  @query('dialog') dialogEl!: HTMLDialogElement;
-
-  @query('zn-input#search-input') searchInput!: ZnInput;
-  @query('.dialog-module__content') commandList!: HTMLElement;
-
-  @query('.dialog-module') dialogModule!: HTMLElement;
-
-  @property({type: Array}) allCommands: CannedResponse[] = [];
-  @property({type: Array, reflect: true}) commands: CannedResponse[] = [];
-  @property({type: Boolean, reflect: true}) open = false;
-
-  private closeWatcher: CloseWatcher | null;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues) {
-    super.firstUpdated(_changedProperties);
-
-    this.dialogEl.addEventListener("close", () => {
-      this.open = false;
-    });
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      const item = this.getCurrentItem();
-      event.preventDefault();
-      event.stopPropagation();
-
-      // Simulate a click to support @click handlers on menu items that also work with the keyboard
-      item?.click();
-    }
-
-    // Move the selection when pressing down or up
-    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-      const items = this.getAllItems();
-      const activeItem = this.getCurrentItem();
-      let index = activeItem ? items.indexOf(activeItem) : 0;
-
-      if (!activeItem) {
-        this.setCurrentItem(items[0]);
-        items[0].focus();
-        return;
-      }
-
-      if (items.length > 0) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (event.key === 'ArrowDown') {
-          index++;
-        } else if (event.key === 'ArrowUp') {
-          index--;
-        } else if (event.key === 'Home') {
-          index = 0;
-        } else if (event.key === 'End') {
-          index = items.length - 1;
-        }
-
-        if (index < 0) {
-          index = items.length - 1;
-        }
-        if (index > items.length - 1) {
-          index = 0;
-        }
-
-        this.setCurrentItem(items[index]);
-        items[index].focus();
-      }
-    }
-  }
-
-  getAllItems() {
-    if (!this.commandList) {
-      return [];
-    }
-
-    return [...this.commandList.children].filter((el: HTMLElement) => {
-      return el.getAttribute('data-command') !== null;
-    }) as HTMLElement[];
-  }
-
-  getCurrentItem() {
-    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
-  }
-
-  setCurrentItem(item: HTMLElement) {
-    const items = this.getAllItems();
-
-    // Update tab indexes
-    items.forEach(i => {
-      i.setAttribute('tabindex', i === item ? '0' : '-1');
-    });
-  }
-
-  focus() {
-    this.searchInput.focus();
-  }
-
-  @watch('open', {waitUntilFirstUpdate: true})
-  handleOpenChange() {
-    if (this.open) {
-      this.addOpenListeners();
-      setTimeout(() => this.focus(), 0);
-    } else {
-      this.removeOpenListeners();
-    }
-  }
-
-  private addOpenListeners() {
-    if ('CloseWatcher' in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => this.requestClose('keyboard');
-    }
-  }
-
-  private removeOpenListeners() {
-    this.closeWatcher?.destroy();
-  }
-
-  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
-    const znRequestClose = this.emit('zn-request-close', {
-      cancelable: true,
-      detail: {source}
-    });
-
-    if (znRequestClose.defaultPrevented) {
-      return;
-    }
-
-    this.dialogEl.close();
-  }
-
-  private handleClick = (event: MouseEvent) => {
-    const item = (event.target as HTMLElement).closest('.command__wrapper');
-    if (!item) return;
-    this.emit('zn-command-select', {detail: {item: item as HTMLElement}});
-    this.emit('zn-editor-update');
-  }
-
-  private _createCommand(command: CannedResponse): TemplateResult {
-    const labels: string[] = [];
-    if (command.labels) {
-      command.labels.forEach((label: string) => {
-        if (label.includes(',')) {
-          labels.push(...label.split(',').map((l: string) => l.trim()));
-        } else {
-          labels.push(label);
-        }
-      });
-    }
-
-    return html`
-      <div data-command="${command.title}" class="command__wrapper" @click="${this.handleClick}">
-        <div class="command__left">
-          <div class="command__command">
-            ${'/' + (command.command ? command.command :
-              command.title.toLowerCase().replace(' ', '-'))}
-          </div>
-          <div class="command__labels">
-            ${repeat(labels, (label: string) => html`
-              <zn-chip class="command__labels__label" size="small"># ${label}</zn-label>
-            `)}
-          </div>
-        </div>
-        <div class="command__right">
-          <div class="command__title">
-            ${command.title}
-          </div>
-          <div class="command__snippet">
-            ${command.content.length > 50 ? command.content.substring(0, 50) + '...' : command.content}
-          </div>
-        </div>
-      </div>`
-  }
-
-  private isFuzzyMatch(target: string, search: string): boolean {
-    let tIdx = 0;
-    let sIdx = 0;
-    target = target.toLowerCase();
-    search = search.toLowerCase();
-    while (tIdx < target.length && sIdx < search.length) {
-      if (target[tIdx] === search[sIdx]) sIdx++;
-      tIdx++;
-    }
-    return sIdx === search.length;
-  }
-
-  handleSearch(event: ZnInputEvent) {
-    const target = event.target as HTMLInputElement | HTMLSelectElement;
-    const searchValue = target.value.trim().toLowerCase();
-    this.isSearching = !!searchValue;
-    if (!searchValue) {
-      this.commands = [...this.allCommands];
-      return;
-    }
-    this.commands = this.allCommands.filter(command =>
-      this.isFuzzyMatch(command.title, searchValue) ||
-      this.isFuzzyMatch(command.content, searchValue) ||
-      (command.labels && command.labels.some(label => this.isFuzzyMatch(label, searchValue)))
-    );
-  }
-
-  render() {
-    const visibleCommands = this.isSearching
-      ? this.commands
-      : this.commands.sort((a, b) => parseInt(b.count) - parseInt(a.count))
-        .slice(0, 5);
-    return html`
-      <dialog closedby="any"
-              open="${this.open || nothing}"
-              class="${classMap({
-                'dialog-module': true,
-                'dialog-module--has-focus': this.hasFocus,
-                'dialog-module--has-results': visibleCommands.length > 0,
-              })}">
-
-        <div class="dialog-module__header">
-          <div class="dialog-module__header--caption">
-            Canned Responses
-          </div>
-
-          <div class="dialog-module__header--search">
-            <zn-input id="search-input"
-                      type="search"
-                      placeholder="Search..."
-                      class="search-input"
-                      autocomplete="off"
-                      autocorrect="off"
-                      @zn-input="${this.handleSearch}">
-              <zn-icon src="search" slot="prefix"></zn-icon>
-            </zn-input>
-          </div>
-        </div>
-
-        <div class="dialog-module__body">
-          <div class="dialog-module__content">
-            ${repeat(visibleCommands, (command: CannedResponse) => this._createCommand(command))}
-          </div>
-
-          <slot></slot>
-        </div>
-
-        <div class="dialog-module__footer">
-          <div>
-            Showing ${visibleCommands.length} of ${this.allCommands.length} responses
-          </div>
-          <zn-button class="dialog-module__close-button"
-                     size="medium"
-                     color="secondary"
-                     @click="${() => this.requestClose('close-button')}">
-            Close
-          </zn-button>
-        </div>
-
-      </dialog>
-    `;
-  }
-
-}
-
-DialogModuleComponent.define('zn-dialog-module');