@kubex/zinc 0.0.2 → 1.0.0

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

@@ -0,0 +1,156 @@
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {FormControlController} from "../../internal/form";
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnSelect from "../select";
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type {ZnSelectEvent} from "../../events/zn-select";
+
+import styles from './linked-select.scss';
+
+interface linkedSelectOption {
+  [key: string]: string;
+}
+
+interface linkedSelectOptions {
+  [key: string]: linkedSelectOption[];
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/linked-select
+ * @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 ZnLinkedSelect extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() name: string = "";
+  @property() value: string;
+
+  @property({type: Boolean, reflect: true}) checked = false;
+  @property({type: Array}) options: linkedSelectOptions;
+  @property({attribute: 'linked-select'}) linkedSelect: string = "";
+
+  @property({attribute: 'cache-key'}) cacheKey: string = "";
+  @property() label: string = "";
+
+  @query('zn-select') input: HTMLInputElement;
+
+  private linkedSelectElement: HTMLSelectElement | ZnSelect;
+  private readonly formControlController = new FormControlController(this, {
+    value: (input) => {
+      const selectElement = this.input;
+      if (selectElement) {
+        return selectElement.value;
+      }
+
+      return input.value;
+    }
+  });
+
+  get validity() {
+    return this.input?.validity;
+  }
+
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    let level = 0;
+    let currentElement: Element | null = this.parentElement;
+    while (level < 10 && currentElement && currentElement.tagName !== 'DOCUMENT') {
+      const element = currentElement.querySelector(`[id="${this.linkedSelect}"]`);
+      if (element instanceof ZnSelect) {
+        this.linkedSelectElement = element as ZnSelect;
+        break;
+      }
+      currentElement = currentElement.parentElement;
+      level++;
+    }
+
+    if (!this.linkedSelectElement) {
+      throw new Error(`Linked select element with name ${this.linkedSelect} not found`);
+    }
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    this.linkedSelectElement?.addEventListener('zn-change', this.handleLinkedSelectChange);
+    this.input.addEventListener('zn-change', this.handleChange);
+    this.formControlController.updateValidity();
+
+    super.firstUpdated(_changedProperties);
+  }
+
+  disconnectedCallback() {
+    this.linkedSelectElement?.removeEventListener('zn-change', this.handleLinkedSelectChange);
+    super.disconnectedCallback();
+  }
+
+  checkValidity(): boolean {
+    return this.input.checkValidity();
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return this.input.reportValidity();
+  }
+
+  setCustomValidity(message: string): void {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  public handleLinkedSelectChange = () => {
+    this.requestUpdate();
+    this.formControlController.updateValidity();
+  };
+
+  public handleChange(e: Event) {
+    this.value = (e.target as HTMLSelectElement).value;
+    this.formControlController.updateValidity();
+  }
+
+  handleSelectChange = (e: ZnSelectEvent) => {
+    this.value = (e.target as ZnSelect).value as string;
+  }
+
+  render() {
+    let selected = this.linkedSelectElement?.value as string;
+    if (!selected && this.options) {
+      selected = Object.keys(this.options)[0];
+    }
+
+    const options: linkedSelectOption[] = selected ? this.options[selected] : [];
+    return html`
+      <zn-select part="select"
+                 class="linked-select"
+                 name="${this.name}"
+                 id="main-input"
+                 cache-key="${this.cacheKey}"
+                 value="${this.value}"
+                 @zn-change=${this.handleSelectChange}
+                 label="${this.label}">
+        ${options && Object.entries(options).map(([key, value]) => html`
+          <zn-option value="${key}">${value}</zn-option>
+        `)}
+      </zn-select>`;
+  }
+}

package/src/components/linked-select/linked-select.scss

@@ -0,0 +1,9 @@
+@use "../../wc";
+
+:host {
+  width: 100%;
+
+  select {
+    border: none !important;
+  }
+}

package/src/components/linked-select/linked-select.test.ts

@@ -0,0 +1,17 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-linked-select>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-select name="linked-select" id="select-1">
+        <option value="option1">Option 1</option>
+      </zn-select>
+
+      <zn-linked-select linked-select="select-1"
+                        options="{&quot;-&quot;:{&quot;-&quot;:&quot;Select Department&quot;},&quot;FID:DEP:1677585809:MZxvTiWlzBlSG&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:DFP20NM0Q&quot;:&quot;Generic&quot;,&quot;FID:TKT:QUE:1678099064:8nGJ5OQfp&quot;:&quot;Money Back&quot;},&quot;FID:DEP:1677585809:Kd83L0aIhsGpB&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:ma9I3ORGu&quot;:&quot;Generic&quot;},&quot;FID:DEP:1677585809:3mBpgQnrkzLSO&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:cFvFFL8o6&quot;:&quot;Generic&quot;}}">
+      </zn-linked-select> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/menu/index.ts

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

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

@@ -0,0 +1,243 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {ifDefined} from "lit/directives/if-defined.js";
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnConfirm from "../confirm";
+import ZnDropdown from "../dropdown";
+import ZnIcon from "../icon";
+import ZnMenuItem from "../menu-item";
+import ZnTooltip from "../tooltip";
+
+import styles from './menu.scss';
+
+interface NavItem {
+  title: string;
+  type: string;
+  path: string;
+  target: string;
+  icon: string;
+  style: string;
+  confirm: {
+    type: string;
+    title: string;
+    caption: string;
+    content: string;
+    trigger: string;
+    action: string;
+  };
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/menu
+ * @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 ZnMenu extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-confirm': ZnConfirm,
+    'zn-dropdown': ZnDropdown,
+    'zn-icon': ZnIcon,
+    'zn-menu-item': ZnMenuItem,
+    'zn-tooltip': ZnTooltip,
+  };
+
+  @query('slot') defaultSlot: HTMLSlotElement;
+
+  @property({attribute: 'actions', type: Array}) actions = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'menu');
+  }
+
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({flatten: true})].filter((el: HTMLElement) => {
+      return !(el.inert || !this.isMenuItem(el));
+
+    }) as ZnMenuItem[];
+  }
+
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+  }
+
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item: ZnMenuItem) {
+    const items = this.getAllItems();
+
+    // Update tab indexes
+    items.forEach(i => {
+      i.setAttribute('tabindex', i === item ? '0' : '-1');
+    });
+  }
+
+  render() {
+    return html`
+      <div
+        @slotchange=${this.handleSlotChange}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}>
+        <slot></slot>
+        ${this.actions.map((item: NavItem) => {
+          if( item === null || item === undefined) {
+            return html``; // Skip null or undefined items
+          }
+          if ( item?.confirm) {
+            return html`
+              <zn-confirm trigger="${ifDefined(item.confirm?.trigger)}"
+                          type="${ifDefined(item.confirm?.type)}"
+                          caption="${item.confirm?.caption}"
+                          content="${item.confirm?.content}"
+                          action="${item.confirm?.action}"></zn-confirm>
+              <zn-menu-item @mousedown=${this.handleMouseDown}
+                            @keydown=${this.handleKeyDown}
+                            id="${item.confirm?.trigger}">
+                ${(item.icon) ? html`
+                  <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                ${item.title}
+              </zn-menu-item>`;
+          } else {
+            if (item.type !== 'dropdown') {
+              return html`
+                <zn-menu-item value="${item.title}"
+                              href="${item.path}"
+                              data-target="${ifDefined(item.target)}">
+                  ${(item.icon) ? html`
+                    <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                  <span @click="${this.handleClick}"
+                        @keydown=${this.handleKeyDown}
+                        @mousedown=${this.handleMouseDown}
+                        data-target="${ifDefined(item.target)}">${item.title}</span>
+                </zn-menu-item>`;
+            } else {
+              return html`
+                <zn-menu-item value="${item.title}" data-path="${ifDefined(item.path)}">
+                  ${(item.icon) ? html`
+                    <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                  <span @click="${this.handleClick}"
+                        @keydown=${this.handleKeyDown}
+                        @mousedown=${this.handleMouseDown}>${item.title}</span>
+                </zn-menu-item>`;
+            }
+          }
+        })}
+      </div>`;
+  }
+
+  private handleClick(event: MouseEvent) {
+    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];
+
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));
+
+    if (!target) return;
+
+    const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
+    const clickHasSubmenu = closestMenu !== this;
+
+    // Make sure we're the menu that's supposed to be handling the click event.
+    if (clickHasSubmenu) return;
+
+    // This isn't true. But we use it for TypeScript checks below.
+    const item = target as ZnMenuItem;
+
+    if (item.type === 'checkbox') {
+      item.checked = !item.checked;
+    }
+
+    // get the parent dropdown and close it
+    (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
+
+    this.emit('zn-select', {detail: {item}});
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    // Make a selection when pressing enter or space
+    if (event.key === 'Enter' || event.key === ' ') {
+      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 (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();
+      }
+    }
+  }
+
+  private handleMouseDown(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target as ZnMenuItem);
+    }
+  }
+
+  private handleSlotChange() {
+    const items = this.getAllItems();
+
+    // Reset the roving tab index when the slotted items change
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+      this.emit('zn-menu-ready');
+    }
+  }
+
+  private isMenuItem(item: HTMLElement) {
+    return (
+      item.tagName.toLowerCase() === 'zn-menu-item' ||
+      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')
+    );
+  }
+}

package/src/components/menu/menu.scss

@@ -0,0 +1,14 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  position: relative;
+  border-width: 1px;
+  border-radius: 5px;
+  width: fit-content;
+  min-width: var(--zn-spacing-small-panel);
+  overflow: auto;
+  overscroll-behavior: none;
+  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  background-color: rgb(var(--zn-panel, 255, 255, 255));
+}

package/src/components/menu/menu.test.ts

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

package/src/components/menu-item/index.ts

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