@kubex/zinc 1.0.25 → 1.0.99

package/src/events/zn-reorder.ts

@@ -0,0 +1,7 @@
+export type ZnReorderEvent = CustomEvent<Record<PropertyKey, never>>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-reorder': ZnReorderEvent;
+  }
+}

package/src/events/zn-search-change.ts

@@ -0,0 +1,11 @@
+export type ZnSearchChangeEvent = CustomEvent<{
+  value: string;
+  formData: Record<string, any>;
+  searchUri?: string;
+}>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-search-change': ZnSearchChangeEvent;
+  }
+}

package/src/events/zn-submit.ts

@@ -1,4 +1,4 @@
-export type ZnSubmitEvent = CustomEvent<{ value: string; element: HTMLElement }>;
+export type ZnSubmitEvent = CustomEvent<{ value: string | string[]; element: HTMLElement }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {

package/src/form-control.scss

@@ -2,6 +2,10 @@
   margin: var(--zn-spacing-2x-small) 3px 3px;
 }
 
+.form-control-input--flush {
+  margin: 0;
+}
+
 .form-control .form-control__label {
   display: none;
 }

package/src/internal/form-navigation.ts

@@ -0,0 +1,510 @@
+import {formCollections} from "./form";
+import {getTabbableElements} from "./tabbable";
+import type {ZincFormControl} from "./zinc-element";
+
+/**
+ * WeakMap of navigation controllers to keep one controller per form
+ */
+const formNavigationControllers: WeakMap<HTMLFormElement, FormNavigationController> = new WeakMap();
+
+export class FormNavigationController {
+  private readonly form: HTMLFormElement;
+
+  constructor(form: HTMLFormElement) {
+    this.form = form;
+    this.form.addEventListener('keydown', this.handleKeyDown, true);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+      if (hasModifier) {
+        return;
+      }
+
+      if (event.isComposing) {
+        return;
+      }
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      const target = event.target as HTMLElement;
+      if (this.isSelectOption(target)) {
+        event.preventDefault();
+        setTimeout(() => {
+          const selectElement = this.findParentSelect(target);
+          if (selectElement) {
+            this.focusNextControl(selectElement);
+          }
+        }, 0);
+        return;
+      }
+
+      if (this.shouldSkipEnterKey(target)) {
+        return;
+      }
+
+      // Check if we're in a group (radio-group or checkbox-group)
+      const group = this.findParentGroup(target);
+      if (group) {
+        event.preventDefault();
+        const moved = this.focusNextInGroup(target, group);
+        // If we couldn't move within the group (we're at the last item)
+        if (!moved) {
+          this.focusNextControl(group);
+        }
+        return;
+      }
+
+      event.preventDefault();
+
+      if (this.areRequiredFieldsFilled()) {
+        this.submitForm();
+      } else {
+        this.focusNextControl(target);
+      }
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      const target = event.target as HTMLElement;
+      const tagName = target.tagName;
+      const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+      if (!hasModifier && !event.defaultPrevented) {
+        const group = this.findParentGroup(target);
+        if (group) {
+          event.preventDefault();
+          const moved = this.focusNextInGroup(target, group);
+          if (!moved) {
+            this.focusNextControl(group);
+          }
+          return;
+        }
+
+        // Individual checkboxes and toggles (not in a group)
+        if (tagName === 'ZN-CHECKBOX' || tagName === 'ZN-TOGGLE') {
+          event.preventDefault();
+          this.focusNextControl(target);
+        }
+      }
+    }
+
+    if (event.key === 'ArrowUp') {
+      const target = event.target as HTMLElement;
+      const tagName = target.tagName;
+      const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+      if (!hasModifier && !event.defaultPrevented) {
+        const group = this.findParentGroup(target);
+        if (group) {
+          event.preventDefault();
+          const moved = this.focusPreviousInGroup(target, group);
+          if (!moved) {
+            this.focusPreviousControl(group);
+          }
+          return;
+        }
+
+        if (tagName === 'ZN-CHECKBOX' || tagName === 'ZN-TOGGLE') {
+          event.preventDefault();
+          this.focusPreviousControl(target);
+        }
+      }
+    }
+  };
+
+  private shouldSkipEnterKey(element: HTMLElement): boolean {
+    const tagName = element.tagName.toLowerCase();
+
+    if (tagName === 'zn-textarea' || tagName === 'textarea') {
+      return true;
+    }
+
+    if (tagName === 'zn-input' || tagName === 'input') {
+      const type = element.getAttribute('type');
+      if (type === 'search') {
+        return true;
+      }
+    }
+
+    return tagName === 'button' || tagName === 'zn-button';
+  }
+
+  private shouldExcludeFromNavigation(element: HTMLElement): boolean {
+    const tagName = element.tagName.toLowerCase();
+    return tagName === 'button' || tagName === 'zn-button';
+  }
+
+  private isSelectOption(element: HTMLElement): boolean {
+    const tagName = element.tagName.toLowerCase();
+    return tagName === 'zn-option';
+  }
+
+  private findParentSelect(element: HTMLElement): HTMLElement | null {
+    let current: HTMLElement | null = element;
+    while (current) {
+      if (current.tagName.toLowerCase() === 'zn-select') {
+        return current;
+      }
+
+      const rootNode = current.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        current = rootNode.host as HTMLElement;
+      } else if (current.parentElement) {
+        current = current.parentElement;
+      } else {
+        break;
+      }
+    }
+    return null;
+  }
+
+  private findParentGroup(element: HTMLElement): HTMLElement | null {
+    let current: HTMLElement | null = element;
+    while (current) {
+      const tagName = current.tagName;
+      if (tagName === 'ZN-RADIO-GROUP' || tagName === 'ZN-CHECKBOX-GROUP') {
+        return current;
+      }
+
+      const rootNode = current.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        current = rootNode.host as HTMLElement;
+      } else if (current.parentElement) {
+        current = current.parentElement;
+      } else {
+        break;
+      }
+    }
+    return null;
+  }
+
+  private getGroupItems(group: HTMLElement): HTMLElement[] {
+    const itemTagName = group.tagName === 'ZN-RADIO-GROUP' ? 'ZN-RADIO' : 'ZN-CHECKBOX';
+    const items: HTMLElement[] = [];
+    const walker = document.createTreeWalker(
+      group,
+      NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode: (node: Node) => {
+          const element = node as HTMLElement;
+          if (element.tagName === itemTagName) {
+            return NodeFilter.FILTER_ACCEPT;
+          }
+          return NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+      items.push(node as HTMLElement);
+    }
+
+    return items;
+  }
+
+  private focusNextInGroup(currentElement: HTMLElement, group: HTMLElement): boolean {
+    const items = this.getGroupItems(group);
+    if (items.length === 0) {
+      return false;
+    }
+
+    let currentIndex = -1;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i] === currentElement || items[i].contains(currentElement)) {
+        currentIndex = i;
+        break;
+      }
+    }
+
+    if (currentIndex >= 0 && currentIndex < items.length - 1) {
+      const nextItem = items[currentIndex + 1];
+      if (typeof nextItem.focus === 'function') {
+        nextItem.focus();
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private focusPreviousInGroup(currentElement: HTMLElement, group: HTMLElement): boolean {
+    const items = this.getGroupItems(group);
+    if (items.length === 0) {
+      return false;
+    }
+
+    let currentIndex = -1;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i] === currentElement || items[i].contains(currentElement)) {
+        currentIndex = i;
+        break;
+      }
+    }
+
+    if (currentIndex > 0) {
+      const previousItem = items[currentIndex - 1];
+      if (typeof previousItem.focus === 'function') {
+        previousItem.focus();
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private areRequiredFieldsFilled(): boolean {
+    const controls = formCollections.get(this.form);
+
+    if (!controls) {
+      return true;
+    }
+
+    for (const control of controls) {
+      const formControl = control as ZincFormControl;
+
+      if (!formControl.name) {
+        continue;
+      }
+
+      if (formControl.disabled) {
+        continue;
+      }
+
+      const value = formControl.value;
+      const hasValue = value !== undefined && value !== null && value !== '';
+      if (!hasValue) {
+        return false;
+      }
+
+      if (typeof formControl.checkValidity === 'function' && !formControl.checkValidity()) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  private getNavigableControls(): HTMLElement[] {
+    const tabbableElements = getTabbableElements(this.form);
+    const navigableControls: HTMLElement[] = [];
+    const seen = new Set<HTMLElement>();
+
+    for (const el of tabbableElements) {
+      const tagName = el.tagName.toLowerCase();
+
+      const isZincControl = [
+        'zn-input',
+        'zn-select',
+        'zn-datepicker',
+        'zn-textarea',
+        'zn-file',
+        'zn-checkbox',
+        'zn-radio',
+        'zn-radio-group',
+        'zn-toggle'
+      ].includes(tagName);
+
+      if (isZincControl) {
+        // Special handling for radios inside radio groups
+        if (tagName === 'zn-radio') {
+          // Check if this radio is inside a radio-group
+          const radioGroup = el.closest('zn-radio-group') as HTMLElement | null;
+          if (radioGroup) {
+            // Add the radio-group instead of the individual radio
+            if (!seen.has(radioGroup)) {
+              seen.add(radioGroup);
+              if (!this.shouldExcludeFromNavigation(radioGroup)) {
+                navigableControls.push(radioGroup);
+              }
+            }
+            continue;
+          }
+        }
+
+        if (seen.has(el)) {
+          continue;
+        }
+        seen.add(el);
+
+        if (this.shouldExcludeFromNavigation(el)) {
+          continue;
+        }
+
+        navigableControls.push(el);
+        continue;
+      }
+
+      const hostElement = (el.getRootNode() as ShadowRoot).host as HTMLElement;
+      if (hostElement && hostElement !== this.form) {
+        const hostTagName = hostElement.tagName.toLowerCase();
+        const isHostZincControl = [
+          'zn-input',
+          'zn-select',
+          'zn-datepicker',
+          'zn-textarea',
+          'zn-file',
+          'zn-checkbox',
+          'zn-radio',
+          'zn-radio-group',
+          'zn-toggle'
+        ].includes(hostTagName);
+
+        if (isHostZincControl) {
+          // Special handling for radios inside radio groups
+          if (hostTagName === 'zn-radio') {
+            // Check if this radio is inside a radio-group
+            const radioGroup = hostElement.closest('zn-radio-group') as HTMLElement | null;
+            if (radioGroup) {
+              // Add the radio-group instead of the individual radio
+              if (!seen.has(radioGroup)) {
+                seen.add(radioGroup);
+                if (!this.shouldExcludeFromNavigation(radioGroup)) {
+                  navigableControls.push(radioGroup);
+                }
+              }
+              continue;
+            }
+          }
+
+          if (seen.has(hostElement)) {
+            continue;
+          }
+          seen.add(hostElement);
+
+          if (this.shouldExcludeFromNavigation(hostElement)) {
+            continue;
+          }
+
+          navigableControls.push(hostElement);
+          continue;
+        }
+      }
+
+      const isNativeControl = ['input', 'select'].includes(tagName);
+      if (isNativeControl) {
+        if (seen.has(el)) {
+          continue;
+        }
+        seen.add(el);
+
+        const type = el.getAttribute('type');
+        if (type === 'search') {
+          continue;
+        }
+
+        navigableControls.push(el);
+      }
+    }
+
+    return navigableControls;
+  }
+
+  private findCurrentControlIndex(currentElement: HTMLElement, navigableControls: HTMLElement[]): number {
+    for (let i = 0; i < navigableControls.length; i++) {
+      const control = navigableControls[i];
+      if (control === currentElement) {
+        return i;
+      }
+
+      const rootNode = currentElement.getRootNode();
+      if (rootNode instanceof ShadowRoot && rootNode.host === control) {
+        return i;
+      }
+
+      if (control.contains(currentElement)) {
+        return i;
+      }
+
+      if (currentElement.contains(control)) {
+        return i;
+      }
+    }
+
+    return -1;
+  }
+
+  private focusNextControl(currentElement: HTMLElement) {
+    const navigableControls = this.getNavigableControls();
+    const currentIndex = this.findCurrentControlIndex(currentElement, navigableControls);
+
+    if (currentIndex >= 0 && currentIndex < navigableControls.length - 1) {
+      const nextControl = navigableControls[currentIndex + 1];
+
+      if (typeof nextControl.focus === 'function') {
+        nextControl.focus();
+
+        const tagName = nextControl.tagName.toLowerCase();
+        if (tagName === 'zn-select') {
+          const selectElement = nextControl as HTMLElement & { show?: () => Promise<void> };
+          if (typeof selectElement.show === 'function') {
+            setTimeout(() => {
+              void selectElement.show?.();
+            }, 0);
+          }
+        }
+      }
+    }
+  }
+
+  private focusPreviousControl(currentElement: HTMLElement) {
+    const navigableControls = this.getNavigableControls();
+    const currentIndex = this.findCurrentControlIndex(currentElement, navigableControls);
+
+    if (currentIndex > 0) {
+      const previousControl = navigableControls[currentIndex - 1];
+
+      if (typeof previousControl.focus === 'function') {
+        previousControl.focus();
+
+        const tagName = previousControl.tagName.toLowerCase();
+        if (tagName === 'zn-select') {
+          const selectElement = previousControl as HTMLElement & { show?: () => Promise<void> };
+          if (typeof selectElement.show === 'function') {
+            setTimeout(() => {
+              void selectElement.show?.();
+            }, 0);
+          }
+        }
+      }
+    }
+  }
+
+  private submitForm() {
+    const submitButton = this.form.querySelector<HTMLButtonElement>('[type="submit"]');
+
+    if (submitButton) {
+      submitButton.click();
+    } else if (typeof this.form.requestSubmit === 'function') {
+      this.form.requestSubmit();
+    } else {
+      const submitEvent = new Event('submit', {
+        bubbles: true,
+        cancelable: true
+      });
+      this.form.dispatchEvent(submitEvent);
+    }
+  }
+
+  destroy() {
+    this.form.removeEventListener('keydown', this.handleKeyDown, true);
+  }
+}
+
+/**
+ * Gets or creates a FormNavigationController for the given form
+ */
+export function getFormNavigationController(form: HTMLFormElement): FormNavigationController {
+  let controller = formNavigationControllers.get(form);
+
+  if (!controller) {
+    controller = new FormNavigationController(form);
+    formNavigationControllers.set(form, controller);
+  }
+
+  return controller;
+}

package/src/internal/form.ts

@@ -1,3 +1,4 @@
+import {getFormNavigationController} from "./form-navigation";
 import type {ReactiveController, ReactiveControllerHost} from "lit";
 import type {ZincFormControl} from "./zinc-element";
 import type Button from "../components/button";
@@ -156,6 +157,11 @@ export class FormControlController implements ReactiveController {
       formCollections.set(this.form, new Set<ZincFormControl>([this.host]));
     }
 
+    // Initialize form navigation controller if the form has the data-enter-navigation attribute
+    if (this.form.hasAttribute('data-enter-navigation')) {
+      getFormNavigationController(this.form);
+    }
+
     this.form.addEventListener('formdata', this.handleFormData);
     this.form.addEventListener('submit', this.handleFormSubmit);
     this.form.addEventListener('reset', this.handleFormReset);