@kubex/zinc 1.0.113 → 1.0.115

package/src/components/translations/translations.component.ts

@@ -6,6 +6,7 @@ import {ifDefined} from 'lit/directives/if-defined.js';
 import {keyed} from 'lit/directives/keyed.js';
 import {live} from 'lit/directives/live.js';
 import {property, state} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from '../button';
 import ZnButtonGroup from '../button-group';
@@ -53,10 +54,26 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @state() private _activeLanguage = 'en';
   @state() private _overflowIndex = -1;
 
-  private _resizeObserver?: ResizeObserver;
   private _lastObservedWidth = 0;
   private _measureRafId = 0;
 
+  constructor() {
+    super();
+    // eslint-disable-next-line no-new
+    new ResizeController(this, {
+      callback: entries => {
+        const width = entries[0]?.contentRect.width ?? 0;
+        if (Math.abs(width - this._lastObservedWidth) < 1) return;
+        this._lastObservedWidth = width;
+        if (this._overflowIndex !== -1) {
+          this._overflowIndex = -1;
+        } else {
+          this._scheduleLangOverflow();
+        }
+      },
+    });
+  }
+
   get validity(): ValidityState {
     return validValidityState;
   }
@@ -106,23 +123,8 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     return Object.keys(this.values);
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this._resizeObserver = new ResizeObserver(entries => {
-      const width = entries[0]?.contentRect.width ?? 0;
-      if (Math.abs(width - this._lastObservedWidth) < 1) return;
-      this._lastObservedWidth = width;
-      if (this._overflowIndex !== -1) {
-        this._overflowIndex = -1;
-      } else {
-        this._scheduleLangOverflow();
-      }
-    });
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._resizeObserver?.disconnect();
     if (this._measureRafId) {
       cancelAnimationFrame(this._measureRafId);
       this._measureRafId = 0;
@@ -131,7 +133,6 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
 
   protected firstUpdated() {
     this.formControlController.updateValidity();
-    this._resizeObserver?.observe(this);
   }
 
   protected updated(changedProperties: PropertyValues) {

package/src/components/translations/translations.scss

@@ -30,6 +30,7 @@
 
 .form-control__label {
   margin-bottom: 0 !important;
+  white-space: nowrap;
 }
 
 .translations--flush,

package/src/components/translations/translations.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnInlineEdit from '../inline-edit/inline-edit.component';
 import type ZnTranslations from './translations.component';
 
 describe('<zn-translations>', () => {
@@ -24,9 +25,9 @@ describe('<zn-translations>', () => {
     el.values = { 'en': 'Hello' };
     await el.updateComplete;
 
-    const input = el.shadowRoot!.querySelector('zn-inline-edit');
+    const input = el.shadowRoot!.querySelector('zn-inline-edit') as ZnInlineEdit | null;
     expect(input).to.exist;
-    await expect(input!.getAttribute('value')).to.equal('Hello');
+    expect(input!.value).to.equal('Hello');
 
     // Simulate change
     input!.value = 'Hello World';

package/src/internal/form.ts

@@ -1,4 +1,5 @@
 import {getFormNavigationController} from "./form-navigation";
+import {Store} from "./storage";
 import type {ReactiveController, ReactiveControllerHost} from "lit";
 import type {ZincFormControl} from "./zinc-element";
 import type Button from "../components/button";
@@ -16,6 +17,10 @@ export const formCollections: WeakMap<HTMLFormElement, Set<ZincFormControl>> = n
 //
 const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
 const checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
+const formPersistenceListeners: WeakMap<HTMLFormElement, {
+  handleInput: (event: Event) => void;
+  handleChange: (event: Event) => void;
+}> = new WeakMap();
 
 //
 // We store a Set of controls that users have interacted with. This allows us to determine the interaction state
@@ -28,6 +33,184 @@ const userInteractedControls: WeakSet<ZincFormControl> = new WeakSet();
 //
 const interactions = new WeakMap<ZincFormControl, string[]>();
 
+const formStorePrefix = 'znform:';
+
+type StoredFormControlValue = {
+  checked?: boolean;
+  indeterminate?: boolean;
+  value?: unknown;
+};
+
+type PersistableNativeControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+function getStorage(localStorage = false): Storage | null {
+  try {
+    return localStorage ? window.localStorage : window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+function getStore(localStorage = false, ttl = 0): Store | null {
+  const storage = getStorage(localStorage);
+  return storage ? new Store(storage, formStorePrefix, ttl) : null;
+}
+
+function getStoreTtl(el?: Element | null) {
+  const ttl = el?.getAttribute('store-ttl');
+  return ttl ? Number(ttl) || 0 : 0;
+}
+
+function usesLocalStorage(el?: Element | null) {
+  return Boolean(el?.hasAttribute('local-storage'));
+}
+
+function getFormStoreKey(form?: HTMLFormElement | null) {
+  return form?.getAttribute('store-key') || '';
+}
+
+function getElementStoreKey(el: Element) {
+  return el.getAttribute('store-key') || '';
+}
+
+function getControlName(el: Element) {
+  return el.getAttribute('name') || ('name' in el && typeof el.name === 'string' ? el.name : '');
+}
+
+function getPersistedControlKey(el: Element, form?: HTMLFormElement | null) {
+  const elementStoreKey = getElementStoreKey(el);
+  const formStoreKey = getFormStoreKey(form);
+
+  if (elementStoreKey) {
+    return formStoreKey ? `${formStoreKey}:${elementStoreKey}` : elementStoreKey;
+  }
+
+  const name = getControlName(el);
+  return formStoreKey && name ? `${formStoreKey}:${name}` : '';
+}
+
+function getPersistedStore(el: Element, form?: HTMLFormElement | null) {
+  const localStorage = usesLocalStorage(el) || usesLocalStorage(form);
+  const ttl = getStoreTtl(el) || getStoreTtl(form);
+  return getStore(localStorage, ttl);
+}
+
+function getStoredControlValue(el: Element, form?: HTMLFormElement | null): StoredFormControlValue | null {
+  const key = getPersistedControlKey(el, form);
+  const store = key ? getPersistedStore(el, form) : null;
+  const storedValue = store?.get(key);
+
+  if (!storedValue) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(storedValue) as StoredFormControlValue;
+  } catch {
+    return {value: storedValue};
+  }
+}
+
+function setStoredControlValue(el: Element, form: HTMLFormElement | null | undefined, value: StoredFormControlValue) {
+  const key = getPersistedControlKey(el, form);
+  const store = key ? getPersistedStore(el, form) : null;
+
+  if (!store) {
+    return;
+  }
+
+  store.set(key, JSON.stringify(value));
+}
+
+function isPersistableNativeControl(el: unknown): el is PersistableNativeControl {
+  return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+}
+
+function getNativeControlStoredValue(control: PersistableNativeControl): StoredFormControlValue {
+  if (control instanceof HTMLInputElement && (control.type === 'checkbox' || control.type === 'radio')) {
+    return {checked: control.checked, value: control.value};
+  }
+
+  return {value: control.value};
+}
+
+function restoreNativeFormControls(form: HTMLFormElement) {
+  const controls = form.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select');
+
+  controls.forEach(control => {
+    const storedValue = getStoredControlValue(control, form);
+    if (!storedValue) {
+      return;
+    }
+
+    if (control instanceof HTMLInputElement && (control.type === 'checkbox' || control.type === 'radio')) {
+      if (typeof storedValue.checked === 'boolean') {
+        control.checked = storedValue.checked;
+      }
+      return;
+    }
+
+    if ('value' in storedValue) {
+      control.value = String(storedValue.value ?? '');
+    }
+  });
+}
+
+function persistNativeFormControl(target: EventTarget | null, form: HTMLFormElement) {
+  if (!isPersistableNativeControl(target) || target.form !== form) {
+    return;
+  }
+
+  setStoredControlValue(target, form, getNativeControlStoredValue(target));
+}
+
+function getZincControlStoredValue(control: ZincFormControl, value: unknown): StoredFormControlValue {
+  const storedValue: StoredFormControlValue = {value};
+
+  if ('checked' in control && typeof control.checked === 'boolean') {
+    storedValue.checked = control.checked;
+  }
+
+  if ('indeterminate' in control && typeof control.indeterminate === 'boolean') {
+    storedValue.indeterminate = control.indeterminate;
+  }
+
+  return storedValue;
+}
+
+function removeStoredValuesByPrefix(storage: Storage, keyPrefix: string) {
+  const keys: string[] = [];
+  const storageKey = formStorePrefix + keyPrefix;
+
+  for (let i = 0; i < storage.length; i++) {
+    const key = storage.key(i);
+    if (key === storageKey || key?.startsWith(storageKey + ':')) {
+      keys.push(key);
+    }
+  }
+
+  keys.forEach(key => storage.removeItem(key));
+}
+
+export function clearFormStoreValues(formOrStoreKey: HTMLFormElement | string) {
+  const keyPrefix = typeof formOrStoreKey === 'string' ? formOrStoreKey : getFormStoreKey(formOrStoreKey);
+
+  if (!keyPrefix) {
+    return;
+  }
+
+  const local = getStorage(true);
+  const session = getStorage(false);
+
+  if (local) {
+    removeStoredValuesByPrefix(local, keyPrefix);
+  }
+
+  if (session && session !== local) {
+    removeStoredValuesByPrefix(session, keyPrefix);
+  }
+}
+
 export interface FormControlControllerOptions {
   /** A function that returns the form containing the form control. */
   form: (input: ZincFormControl) => HTMLFormElement | null;
@@ -108,6 +291,7 @@ export class FormControlController implements ReactiveController {
     });
 
     await this.host.updateComplete;
+    this.restorePersistedValue();
     if (form) {
       this.checkFormValidity();
     }
@@ -171,6 +355,8 @@ export class FormControlController implements ReactiveController {
     this.form.addEventListener('cancelled', this.enableSubmit);
     this.form.addEventListener('error', this.enableSubmit);
 
+    this.attachFormPersistence(this.form);
+
     // Overload the form's reportValidity() method so it looks at Zinc form controls
     if (!reportValidityOverloads.has(this.form)) {
       reportValidityOverloads.set(this.form, this.form.reportValidity);
@@ -207,6 +393,7 @@ export class FormControlController implements ReactiveController {
       this.form.removeEventListener('complete', this.enableSubmit);
       this.form.removeEventListener('cancelled', this.enableSubmit);
       this.form.removeEventListener('error', this.enableSubmit);
+      this.detachFormPersistence(this.form);
 
       if (reportValidityOverloads.has(this.form)) {
         this.form.reportValidity = reportValidityOverloads.get(this.form)!;
@@ -368,9 +555,56 @@ export class FormControlController implements ReactiveController {
     if (emittedEvents.length === this.options.assumeInteractionOn.length) {
       this.setUserInteracted(this.host, true);
     }
+    this.persistHostValue();
     this.checkFormValidity();
   };
 
+  private attachFormPersistence(form: HTMLFormElement) {
+    if (formPersistenceListeners.has(form)) {
+      return;
+    }
+
+    const handleInput = (event: Event) => persistNativeFormControl(event.target, form);
+    const handleChange = (event: Event) => persistNativeFormControl(event.target, form);
+    form.addEventListener('input', handleInput);
+    form.addEventListener('change', handleChange);
+    formPersistenceListeners.set(form, {handleInput, handleChange});
+
+    restoreNativeFormControls(form);
+  }
+
+  private detachFormPersistence(form: HTMLFormElement) {
+    const listeners = formPersistenceListeners.get(form);
+    if (!listeners) {
+      return;
+    }
+
+    form.removeEventListener('input', listeners.handleInput);
+    form.removeEventListener('change', listeners.handleChange);
+    formPersistenceListeners.delete(form);
+  }
+
+  private restorePersistedValue() {
+    const storedValue = getStoredControlValue(this.host, this.form);
+    if (!storedValue) {
+      return;
+    }
+
+    if ('checked' in this.host && typeof storedValue.checked === 'boolean') {
+      this.options.setValue(this.host, storedValue.checked);
+    } else if ('value' in storedValue) {
+      this.options.setValue(this.host, storedValue.value);
+    }
+
+    if ('indeterminate' in this.host && typeof storedValue.indeterminate === 'boolean') {
+      this.host.indeterminate = storedValue.indeterminate;
+    }
+  }
+
+  private persistHostValue() {
+    setStoredControlValue(this.host, this.form, getZincControlStoredValue(this.host, this.options.value(this.host)));
+  }
+
   private checkFormValidity = () => {
     //
     // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation

package/src/internal/theme.ts

@@ -1,54 +1,34 @@
-import type {ReactiveController, ReactiveControllerHost} from "lit";
+import {signal, SignalWatcher} from '@lit-labs/signals';
 
-/**
- * ThemeController is a reactive controller that listens for theme changes
- * and updates the theme property on the host element.
- *
- * if you want to reflect the theme attribute to the host element, you can use
- * the following code:
- *
- * ```ts
- * import { ThemeController } from "@zinc/internal/theme";
- *
- * export default class MyElement extends HTMLElement {
- *    @property({ reflect: true }) t = '';
- *    ...
- *  ```
- */
-export class ThemeController implements ReactiveController {
-  host: ReactiveControllerHost & HTMLElement;
-
-  t: string = '';
+function getDefaultTheme(): string {
+  if (typeof document === 'undefined') return 'light';
+  return document.documentElement.getAttribute('t')
+    || document.body.getAttribute('t')
+    || 'light';
+}
 
-  constructor(host: ReactiveControllerHost & HTMLElement) {
-    this.host = host;
-    this.host.addController(this);
-  }
+export const themeSignal = signal<string>(getDefaultTheme());
 
-  hostConnected() {
-    this.getDefaultTheme();
-    this.host.setAttribute('t', this.t);
-    window.addEventListener('theme-change', this.handleThemeEventUpdate.bind(this));
-  }
+let listenerInstalled = false;
 
-  hostDisconnected() {
-    window.removeEventListener('theme-change', this.handleThemeEventUpdate.bind(this));
-  }
+export function installThemeListener(): void {
+  if (listenerInstalled || typeof window === 'undefined') return;
+  listenerInstalled = true;
 
-  handleThemeEventUpdate = (e: CustomEvent & { theme: string }) => {
-    if (e && e.detail) {
-      this.t = e.detail as string;
-      this.host.setAttribute('t', this.t);
-      return;
+  window.addEventListener('theme-change', (e: Event) => {
+    const detail: unknown = (e as CustomEvent<unknown>).detail;
+    let next: string;
+    if (typeof detail === 'string') {
+      next = detail;
+    } else if (detail && typeof detail === 'object' && 'theme' in detail && typeof (detail as {theme: unknown}).theme === 'string') {
+      next = (detail as {theme: string}).theme;
+    } else {
+      next = getDefaultTheme();
     }
+    if (next !== themeSignal.get()) themeSignal.set(next);
+  });
+}
 
-    this.getDefaultTheme();
-  }
+installThemeListener();
 
-  getDefaultTheme = () => {
-    this.t = document.documentElement.getAttribute('t')
-      || window.document.documentElement.getAttribute('t')
-      || window.document.body.getAttribute('t')
-      || 'light';
-  }
-}
+export {SignalWatcher};

package/src/internal/zinc-element.ts

@@ -1,6 +1,6 @@
-import {LitElement} from "lit";
+import {LitElement, type PropertyValues} from "lit";
 import {property} from "lit/decorators.js";
-import {ThemeController} from "./theme";
+import {SignalWatcher, themeSignal} from "./theme";
 import type {
   EventTypeDoesNotRequireDetail,
   EventTypeRequiresDetail,
@@ -11,11 +11,19 @@ import type {
   ZincEventInit
 } from "./event";
 
-export default class ZincElement extends LitElement {
+export default class ZincElement extends SignalWatcher(LitElement) {
   @property() dir: string; // LTR or RTL direction
   @property() lang: string; // Language
   @property({reflect: true}) t: string; // Theme (light or dark)
 
+  protected override willUpdate(changed: PropertyValues): void {
+    // Reading themeSignal here subscribes this component to theme changes
+    // via the SignalWatcher mixin. The reflected `t` attribute keeps existing
+    // CSS selectors like `[t="dark"]` working.
+    this.t = themeSignal.get();
+    super.willUpdate(changed);
+  }
+
   static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {
     const currentRegisteredConstructor = customElements.get(name) as
       | CustomElementConstructor
@@ -54,10 +62,6 @@ export default class ZincElement extends LitElement {
   constructor() {
     super();
 
-    // All Zinc components should have a theme controller  /
-    /* eslint-disable no-new */
-    new ThemeController(this);
-
     // Make sure we have access to all dependencies and they are defined
     Object.entries((this.constructor as typeof ZincElement).dependencies).forEach(([name, component]) => {
       (this.constructor as typeof ZincElement).define(name, component);
@@ -91,6 +95,7 @@ export interface ZincFormControl extends ZincElement {
   defaultValue?: unknown;
   defaultChecked?: boolean;
   form?: string;
+  storeKey?: string;
 
   // Constraint validation attributes
   pattern?: string;

package/src/utilities/form.ts

@@ -0,0 +1 @@
+export {clearFormStoreValues} from '../internal/form';

package/src/wc.scss

@@ -28,7 +28,7 @@
 .width-container, .form-container, .wide-form-container {
   height: 100%;
   width: 100%;
-  margin: 0 auto;
+  margin: var(--zn-default-margin, 0 auto);
 }
 
 .width-container {

package/src/zinc.ts

@@ -26,6 +26,8 @@ export { default as Chart } from './components/chart';
 export { default as SimpleChart } from './components/simple-chart';
 export { default as Header } from './components/header';
 export { default as Navbar } from './components/navbar';
+export { default as Page } from './components/page';
+export { default as Tab } from './components/tab';
 export { default as IconPicker } from './components/icon-picker';
 export { default as InlineEdit } from './components/inline-edit';
 export { default as Pagination } from './components/pagination';
@@ -103,6 +105,7 @@ export { default as ZincElement } from './internal/zinc-element';
 export * from './utilities/on';
 export * from './utilities/query';
 export * from './utilities/lit-to-html';
+export * from './utilities/form';
 
 // Events
 export * from './events/events';