@kubex/zinc 1.0.4 → 1.0.6

package/src/components/editor/modules/toolbar/toolbar.scss

@@ -0,0 +1,98 @@
+@use "../../../../../scss/boot"; // Need to include the global styles again for Air Picker to work properly
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  &__group {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &--overflow {
+      display: none;
+    }
+
+    &--empty {
+      display: none;
+    }
+
+    /* Divider between toolbar groups (only when the previous group is not empty and not hidden) */
+    &:not(&--empty):not(&--hidden) + &::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 18px;
+      background-color: var(--zn-color-gray-300);
+      opacity: 0.8;
+      margin-inline: var(--zn-spacing-2x-small);
+      border-radius: 10px;
+    }
+
+    /* Ensure divider appears when a group has any previous visible group (skips hidden/empty in between) */
+    &--has-prev-visible::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 18px;
+      background-color: var(--zn-color-gray-300);
+      opacity: 0.8;
+      margin-inline: var(--zn-spacing-2x-small);
+      border-radius: 10px;
+    }
+  }
+
+  &__dropdown-trigger {
+    width: 44px;
+    height: 28px;
+    margin: 3px 2px;
+
+    &::part(icon) {
+      margin-left: 4px;
+    }
+  }
+
+  &__format-button,
+  &__action-button,
+  &__overflow-trigger {
+    width: 28px;
+    height: 28px;
+    margin: 3px 2px;
+  }
+
+  /* Move underline icon down a bit */
+  &__format-button[icon="format_underlined"]::part(base) {
+    position: relative;
+    top: 1px;
+  }
+}
+
+.color-icon {
+  width: 15px;
+  height: 15px;
+  display: block;
+  border-radius: 100%;
+  flex-shrink: 0;
+
+  @each $name, $color in (
+    red: var(--zn-color-red-500),
+    blue: var(--zn-color-blue-500),
+    orange: var(--zn-color-orange-500),
+    yellow: var(--zn-color-yellow-400),
+    indigo: var(--zn-color-indigo-500),
+    violet: var(--zn-color-violet-500),
+    green: var(--zn-color-green-500),
+    pink: var(--zn-color-pink-500),
+    gray: var(--zn-color-gray-500)
+  ) {
+    &--#{"" + $name} {
+      background-color: #{$color};
+    }
+  }
+}
+
+/* Line up unset value with color chips */
+.color-icon--unset {
+  margin-inline-end: var(--zn-spacing-x-small);
+}

package/src/components/editor/modules/toolbar/toolbar.ts

@@ -0,0 +1,328 @@
+import './toolbar.component';
+import Quill from "quill";
+import QuillToolbar from "quill/modules/toolbar";
+import type DialogComponent from "../dialog/dialog.component";
+import type Emoji from "../emoji/emoji";
+import type ToolbarComponent from "./toolbar.component";
+import type ZnDropdown from "../../../dropdown";
+import type ZnMenuItem from "../../../menu-item";
+
+class Toolbar extends QuillToolbar {
+  private readonly _quill: Quill;
+  private readonly _component: ToolbarComponent;
+  private _lastDialogUri?: string;
+  private _formatters: Element[] = [];
+
+  constructor(quill: Quill, options: {
+    container: ToolbarComponent;
+    handlers?: Record<string, (value?: any) => void>;
+  }) {
+    super(quill, options);
+
+    // Add handlers after parent Toolbar initialization
+    this.addHandler('attachment', () => null);
+    this.addHandler('date', () => this._openDatePicker());
+    this.addHandler('divider', () => this._insertDivider());
+    this.addHandler('redo', () => quill.history.redo());
+    this.addHandler('undo', () => quill.history.undo());
+    this.addHandler('dialog', (value: string) => this._openDialog(value));
+
+    this._quill = quill;
+    this._component = options.container;
+
+    this._component.updateComplete.then(() => {
+      this._attachToolbarHandlers();
+      this._syncToolbarState = this._syncToolbarState.bind(this);
+      this._component.addEventListener('zn-toolbar-overflow-updated', this._handleOverflowUpdate);
+
+      if (quill) {
+        quill.on('selection-change', this._syncToolbarState);
+        quill.root?.addEventListener('click', this._syncToolbarState);
+        quill.on('text-change', this._syncToolbarState);
+        this._syncToolbarState();
+      }
+    });
+  }
+
+  public callFormat(key: string, value?: string | boolean | undefined) {
+    const handler = (this.handlers?.[key] as ((value?: any) => void) | undefined);
+    if (value === undefined) {
+      if (key === 'header' || key === 'color') {
+        value = false; // False for text normal or default color
+      }
+      if (key === 'link') {
+        value = true; // True for creating a link
+      }
+    }
+    if (typeof handler === 'function') {
+      handler.call(this, value);
+      return;
+    }
+    if (key === 'clean') {
+      const range = this._quill.getSelection();
+      if (range) {
+        this._quill.removeFormat(range.index, range.length || 0);
+      } else {
+        this._quill.removeFormat(0, this._quill.getLength());
+      }
+      return;
+    }
+    const range = this._quill.getSelection();
+    const formats: Record<string, unknown> = range ? this._quill.getFormat(range) : {};
+    const current = formats[key];
+    const next: boolean | string | number = value !== undefined ? value as boolean | string | number : !(current as boolean);
+    this._quill.format(key, next);
+  }
+
+  public trigger(key: string) {
+    const container = this.container;
+    if (!container) return;
+
+    const matches = this._formatters.filter(
+      formatter => formatter.getAttribute('data-toolbar-key') === key && formatter.tagName === 'ZN-BUTTON'
+    );
+
+    const tool = (matches?.length ? (matches[0] as HTMLElement) : null);
+    if (tool) {
+      tool.click();
+      return;
+    }
+
+    const shadowRoot = this._component.shadowRoot;
+    const element = shadowRoot?.querySelector(`[data-toolbar-key="${key}"]`) as HTMLElement | null;
+    if (element) {
+      const format = element.getAttribute('data-format');
+      const type = element.getAttribute('data-format-type') ?? undefined;
+      if (format) {
+        this.callFormat(format, type);
+      }
+    }
+  }
+
+  private _attachToolbarHandlers() {
+    const shadowRoot = this._component.shadowRoot;
+    const shadowFormatters = shadowRoot?.querySelectorAll('[data-format]') ?? [];
+    const slottedFormatters: Element[] = [];
+    const slot = shadowRoot?.querySelector('slot');
+    if (slot) {
+      const assigned = slot.assignedElements({flatten: true});
+      assigned.forEach(element => {
+        const formatElement = element.shadowRoot?.querySelector('[data-format]');
+        if (formatElement) {
+          slottedFormatters.push(formatElement);
+        }
+      });
+    }
+
+    this._formatters = [...shadowFormatters, ...slottedFormatters];
+
+    if (shadowRoot) {
+      shadowRoot.addEventListener('click', this._onToolbarClick);
+    }
+  }
+
+  private _onToolbarClick = (e: Event) => {
+    const path = (e.composedPath()) || [];
+    let targetEl: HTMLElement | null = null;
+
+    for (const node of path as EventTarget[]) {
+      if (node instanceof HTMLElement) {
+        if (node.hasAttribute && node.hasAttribute('data-format')) {
+          targetEl = node;
+          break;
+        }
+      }
+    }
+    if (!targetEl) return;
+
+    const format = targetEl.getAttribute('data-format');
+    if (!format) return;
+
+    const type: string | undefined = targetEl.getAttribute('data-format-type') ?? undefined;
+    this.callFormat(format, type);
+  }
+
+  private _syncToolbarState() {
+    if (!this._quill) return;
+
+    const range = this._quill.getSelection();
+    if (!range) return;
+
+    const formats: Record<string, any> = this._quill.getFormat(range);
+    if (!formats) return;
+
+    this._syncButtonState('format_bold', !!formats.bold);
+    this._syncButtonState('format_italic', !!formats.italic);
+    this._syncButtonState('format_underlined', !!formats.underline);
+
+    this._updateHeadingFormatMenu(formats);
+    this._updateListFormatMenu(formats);
+    this._updateTextFormatMenu(formats);
+    this._updateColorFormatMenu(formats);
+
+    this._updateDropdownTrigger('zn-dropdown.toolbar__header-dropdown', 'match_case');
+    this._updateDropdownTrigger('zn-dropdown.toolbar__list-dropdown', 'lists');
+  }
+
+  private _updateHeadingFormatMenu(formats: Record<string, any>) {
+    const wanted = formats.header ? String(formats.header) : ''; // Empty string for text normal
+    this._updateMenuCheckedState('zn-dropdown.toolbar__header-dropdown zn-menu zn-menu-item[data-format]', 'data-format-type', wanted);
+  }
+
+  private _updateListFormatMenu(formats: Record<string, any>) {
+    const list = formats.list as string | null;
+    const listValue = (list === 'ordered' || list === 'bullet' || list === 'checked') ? list : null;
+    this._updateMenuCheckedState('zn-dropdown.toolbar__list-dropdown zn-menu zn-menu-item[data-format]', 'data-format-type', listValue);
+  }
+
+  private _updateTextFormatMenu(formats: Record<string, any>) {
+    const selector = 'zn-dropdown.toolbar__format-dropdown zn-menu zn-menu-item[data-format]';
+    const attr = 'data-format';
+    const wanted = this._getTextFormats(formats);
+
+    this._updateMenuCheckedState(selector, attr, wanted);
+  }
+
+  private _updateColorFormatMenu(formats: Record<string, any>) {
+    const color = (typeof formats.color === 'string') ? formats.color : '';
+    this._updateMenuCheckedState('zn-dropdown.toolbar__color-dropdown zn-menu zn-menu-item[data-format]', 'data-format-type', color);
+  }
+
+  private _getTextFormats(formats: Record<string, any>) {
+    const wanted: string[] = [];
+    if (formats.strike) {
+      wanted.push('strike');
+    }
+    if (formats.blockquote) {
+      wanted.push('blockquote');
+    }
+    if (formats.code) {
+      wanted.push('code');
+    }
+    if (Object.prototype.hasOwnProperty.call(formats, 'code-block')) {
+      wanted.push('code-block');
+    }
+    return wanted;
+  }
+
+  private _updateMenuCheckedState(selector: string, matchAttr: string, wanted: string | string[] | null) {
+    const items = this._component.shadowRoot?.querySelectorAll(selector) as NodeListOf<ZnMenuItem> | undefined;
+    if (!items?.length) return;
+
+    const wantedValues: string[] = wanted === null ? [] : Array.isArray(wanted) ? wanted : [wanted];
+
+    items.forEach((item: ZnMenuItem) => {
+      const value = item.getAttribute(matchAttr) ?? '';
+      if (item.getAttribute('type') === 'checkbox') {
+        item.checked = wantedValues.includes(value);
+      }
+    });
+  }
+
+  private _updateDropdownTrigger(dropdownSelector: string, defaultIconSrc: string) {
+    const shadowRoot = this._component.shadowRoot;
+    const dropdown = shadowRoot?.querySelector(dropdownSelector) as HTMLElement | null;
+    if (!dropdown) return;
+
+    const trigger = dropdown.querySelector('zn-button[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+
+    const menu = dropdown.querySelector('zn-menu');
+    const items = menu?.querySelectorAll('zn-menu-item') as NodeListOf<ZnMenuItem> | undefined;
+
+    let iconSrc = defaultIconSrc;
+    let iconColor = 'default';
+    if (items?.length) {
+      items.forEach((item: ZnMenuItem) => {
+        const checked = item.checked ?? (item.hasAttribute('checked'));
+        if (checked) {
+          const icon = item.querySelector('zn-icon')!;
+          iconSrc = icon?.getAttribute('src') ?? iconSrc;
+          iconColor = 'primary';
+        }
+      });
+    }
+
+    trigger.innerHTML = `<zn-icon src="${iconSrc}" color="${iconColor}" size="18"></zn-icon>`;
+  }
+
+  private _syncButtonState(icon: string, active: boolean) {
+    const button = this._component.shadowRoot?.querySelector(`zn-button[icon="${icon}"]`) as HTMLElement | null;
+    if (!button) return;
+    if (active) {
+      button.classList.add('ql-active');
+      button.setAttribute('icon-color', 'primary');
+    } else {
+      button.classList.remove('ql-active');
+      button.removeAttribute('icon-color');
+    }
+  }
+
+  private _insertDivider() {
+    if (!this._quill) return;
+
+    const selection = this._quill.getSelection(true);
+    let index = selection ? selection.index + selection.length : this._quill.getLength();
+
+    const prevChar = index > 0 ? this._quill.getText(index - 1, 1) : '\n';
+    if (prevChar !== '\n') {
+      this._quill.insertText(index, '\n', Quill.sources.USER);
+      index += 1;
+    }
+
+    this._quill.insertEmbed(index, 'hr', true, Quill.sources.USER);
+    this._quill.insertText(index + 1, '\n', Quill.sources.USER);
+    this._quill.setSelection(index + 1, 0, Quill.sources.USER);
+
+    this._syncToolbarState();
+  }
+
+  private _openDatePicker() {
+    const shadow = this._component.shadowRoot;
+    if (!shadow) return;
+
+    const button = shadow.querySelector(`zn-button.toolbar__date-dropdown-trigger`) as HTMLElement | null;
+    const isVisible = (el: HTMLElement | null) => (el?.offsetParent !== null);
+
+    if (isVisible(button)) {
+      button!.click();
+      return;
+    }
+
+    const overflowDropdown = shadow.querySelector('zn-dropdown.toolbar__overflow') as ZnDropdown | null;
+    if (overflowDropdown) {
+      overflowDropdown.show().then();
+
+      const overflowMenu = shadow.querySelector('.toolbar__overflow-menu') as HTMLElement | null;
+      const dateParentItem = overflowMenu?.querySelector('zn-menu-item[data-overflow-source="date"]') as HTMLElement | null;
+
+      if (dateParentItem) {
+        // Trigger submenu open by simulating hover/focus
+        dateParentItem.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
+        dateParentItem.focus?.();
+      }
+    }
+  }
+
+  private _openDialog(uri: string) {
+    if (this._lastDialogUri === uri) {
+      const dialog = document.querySelector(`zn-editor-dialog`) as DialogComponent | null;
+      if (!dialog) return;
+
+      dialog.dialogEl.showModal();
+    }
+
+    const dialog = document.querySelector(`zn-editor-dialog`) as DialogComponent | null;
+    if (!dialog) return;
+
+    dialog.dialogEl.showModal();
+    dialog.setContent(`<app-space id="app-editor-modal" allow-scripts auto-load uri="${uri}"></app-space>`);
+  }
+
+  private _handleOverflowUpdate = () => {
+    const emoji = this._quill.getModule('emoji') as Emoji;
+    emoji?.initPicker();
+  }
+}
+
+export default Toolbar;

package/src/components/expanding-action/expanding-action.component.ts

@@ -281,7 +281,7 @@ export default class ZnExpandingAction extends ZincElement {
         <zn-button slot="trigger"
                    class="expanding-action__button"
                    color="transparent"
-                   size="x-small"
+                   size="medium"
                    icon="${this.icon}"
                    icon-color="${this.color}"
                    icon-size="20"
@@ -303,7 +303,7 @@ export default class ZnExpandingAction extends ZincElement {
       <zn-button slot="trigger"
                  class="expanding-action__button expanding-action__close-icon"
                  color="transparent"
-                 size="x-small"
+                 size="medium"
                  @click="${this.handleIconCloseClicked}"
                  icon="close"
                  icon-size="20">

package/src/components/expanding-action/expanding-action.scss

@@ -67,8 +67,8 @@
   }
 }
 
-zn-button.expanding-action__button::part(base) {
-  padding: 7px 5px;
+zn-button.expanding-action__button {
+  aspect-ratio: 1/1;
 }
 
 .expanding-action--drop .expanding-action__content {

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

@@ -0,0 +1,91 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+
+import type ZnDataSelect from "../data-select";
+import type ZnDataTable from "../data-table";
+import type ZnInput from "../input";
+import type ZnQueryBuilder from "../query-builder";
+import type ZnSelect from "../select";
+
+import styles from './filter-wrapper.scss';
+
+type AllowedInputElement =
+  HTMLInputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement
+  | ZnInput
+  | ZnSelect
+  | ZnDataSelect
+  | ZnQueryBuilder
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/filter-wrapper
+ * @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 ZnFilterWrapper extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() button: string = 'Filter';
+
+  private hasSubmitButton: boolean = false;
+
+  handleSubmit = (event: Event) => {
+    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 inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
+      const params: Record<string, any> = {};
+      inputs.forEach(input => {
+        if (!input.value && input.hasAttribute('omit-empty')) {
+          return;
+        }
+        params[input.name] = input.value as string;
+      });
+
+      dataTable.requestParams = params;
+      dataTable.refresh();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const button: HTMLElement | null = this.querySelector('zn-button[submit]');
+    if (button) {
+      this.hasSubmitButton = true;
+      button.addEventListener('click', this.handleSubmit);
+    }
+  }
+
+  private renderDefaultButton() {
+    return html`
+      <zn-button part="search-button"
+                 class="filter-wrapper__submit"
+                 type="submit"
+                 @click="${this.handleSubmit}">
+        ${this.button}
+      </zn-button>
+    `;
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+      ${this.hasSubmitButton ? '' : this.renderDefaultButton()}
+    `;
+  }
+}

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

@@ -0,0 +1,11 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.filter-wrapper {
+  &__submit {
+    margin-top: var(--zn-spacing-medium);
+  }
+}

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

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

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

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

package/src/components/header/header.component.ts

@@ -141,7 +141,7 @@ export default class ZnHeader extends ZincElement {
           ${hasPreviousPath ? html`
             <a href="${this.previousPath}" class="caption__back"
                data-target="${this.previousTarget ? this.previousTarget : ''}">
-              <zn-button size="content" icon="arrow_back" icon-size="24" color="transparent"></zn-buttonicon>
+              <zn-button size="content" icon="arrow_back" icon-size="24" color="transparent"></zn-button>
             </a>` : null}
 
           ${hasDefaultSlot ? html`

package/src/components/header/header.scss

@@ -21,6 +21,9 @@
     font-size: var(--zn-font-size-large);
     color: rgba(var(--zn-text-panel-title), 100%);
     margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &--has-breadcrumb {
@@ -110,6 +113,7 @@
     display: flex;
     flex-wrap: wrap;
     width: 100%;
+    max-width: 100%;
     height: fit-content;
     gap: 10px;
     margin: 0 auto;
@@ -123,13 +127,15 @@
     flex-direction: column;
     gap: 1px;
     min-height: 43px;
-    flex-shrink: 0;
+    flex-shrink: 1;
+    max-width: 100%;
   }
 
   &__right {
     flex-grow: 1;
     flex-shrink: 1;
     overflow: hidden;
+    min-width: 20px;
   }
 
   &__description {
@@ -180,6 +186,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
+    max-width: 100%;
 
     a {
       display: flex;