@kubex/zinc 0.0.3 → 1.0.0

package/src/events/zn-after-expand.ts

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

package/src/events/zn-after-hide.ts

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

package/src/events/zn-after-show.ts

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

package/src/events/zn-blur.ts

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

package/src/events/zn-cancel.ts

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

package/src/events/zn-change.ts

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

package/src/events/zn-clear.ts

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

package/src/events/zn-close.ts

@@ -0,0 +1,7 @@
+export type ZnCloseEvent = CustomEvent<{ element: Element }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-close': ZnCloseEvent;
+  }
+}

package/src/events/zn-collapse.ts

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

package/src/events/zn-copy.ts

@@ -0,0 +1,7 @@
+export type ZnCopyEvent = CustomEvent<{ value: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-copy': ZnCopyEvent;
+  }
+}

package/src/events/zn-element-added.ts

@@ -0,0 +1,7 @@
+export type ZnElementAddedEvent = CustomEvent<{ element: Element }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-element-added': ZnElementAddedEvent;
+  }
+}

package/src/events/zn-error.ts

@@ -0,0 +1,7 @@
+export type ZnErrorEvent = CustomEvent<{ status?: number }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-error': ZnErrorEvent;
+  }
+}

package/src/events/zn-expand.ts

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

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

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

package/src/events/zn-finish.ts

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

package/src/events/zn-focus.ts

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

package/src/events/zn-hide.ts

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

package/src/events/zn-hover.ts

@@ -0,0 +1,10 @@
+export type ZnHoverEvent = CustomEvent<{
+  phase: 'start' | 'move' | 'end';
+  value: number;
+}>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-hover': ZnHoverEvent;
+  }
+}

package/src/events/zn-initial-focus.ts

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

package/src/events/zn-input.ts

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

package/src/events/zn-invalid.ts

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

package/src/events/zn-load.ts

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

package/src/events/zn-menu-ready.ts

@@ -0,0 +1,9 @@
+export type ZnMenuReadyEvent = CustomEvent<{ value: string; element: HTMLElement }>;
+
+declare global
+{
+  interface GlobalEventHandlersEventMap
+  {
+    'zn-menu-ready': ZnMenuReadyEvent;
+  }
+}

package/src/events/zn-menu-select.ts

@@ -0,0 +1,9 @@
+export type ZnMenuSelectEvent = CustomEvent<{ value: string; element: HTMLElement }>;
+
+declare global
+{
+  interface GlobalEventHandlersEventMap
+  {
+    'zn-menu-select': ZnMenuSelectEvent;
+  }
+}

package/src/events/zn-open.ts

@@ -0,0 +1,7 @@
+export type ZnOpenEvent = CustomEvent<{ element: Element }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-open': ZnOpenEvent;
+  }
+}

package/src/events/zn-remove.ts

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

package/src/events/zn-request-close.ts

@@ -0,0 +1,7 @@
+export type ZnRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-request-close': ZnRequestCloseEvent;
+  }
+}

package/src/events/zn-select.ts

@@ -0,0 +1,9 @@
+import type ZnMenuItem from "../components/menu-item";
+
+export type ZnSelectEvent = CustomEvent<{ item: ZnMenuItem }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-select': ZnSelectEvent;
+  }
+}

package/src/events/zn-show.ts

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

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

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

package/src/events/zn-submit.ts

@@ -0,0 +1,7 @@
+export type ZnSubmitEvent = CustomEvent<{ value: string; element: HTMLElement }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-submit': ZnSubmitEvent;
+  }
+}

package/src/form-control.scss

@@ -0,0 +1,123 @@
+.form-control-input {
+  margin: var(--zn-spacing-2x-small) 3px 3px;
+}
+
+.form-control .form-control__label {
+  display: none;
+}
+
+.form-control .form-control__help-text {
+  display: none;
+}
+
+/* Label */
+.form-control--has-label .form-control__label {
+  display: inline-block;
+  color: var(--zn-input-label-color);
+  font-weight: var(--zn-font-weight-semibold);
+  margin-bottom: var(--zn-spacing-2x-small);
+}
+
+.form-control--has-label.form-control--medium .form-control__label {
+  font-size: var(--zn-input-label-font-size-medium);
+}
+
+.form-control--has-label.form-control--large .form-control__label {
+  font-size: var(--zn-input-label-font-size-large);
+}
+
+:host([required]) .form-control--has-label .form-control__label::after {
+  content: var(--zn-input-required-content);
+  margin-inline-start: var(--zn-input-required-content-offset);
+  color: var(--zn-input-required-content-color);
+}
+
+.form-control--has-label.form-control--radio-group .form-control__label,
+.form-control--has-label.form-control--checkbox-group .form-control__label {
+  margin-bottom: 0;
+}
+
+/* Label with tooltip */
+.form-control--has-label.form-control--has-label-tooltip .form-control__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+}
+
+.form-control--has-label.form-control--small .form-control__label {
+  font-size: var(--zn-input-label-font-size-small);
+}
+
+.form-control--label-tooltip {
+  color: var(--zn-color-neutral-700);
+  font-size: var(--zn-font-size-small);
+
+  zn-icon {
+    --icon-color: var(--zn-color-neutral-700);
+    --icon-size: var(--zn-font-size-small);
+  }
+}
+
+/* Label with optional context note */
+.form-control--has-label.form-control--has-context-note {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.form-control__label-context-note {
+  color: var(--zn-input-help-text-color);
+  font-size: var(--zn-font-size-small);
+  margin-bottom: var(--zn-spacing-2x-small);
+}
+
+.form-control--has-label.form-control--has-context-note .form-control-input {
+  width: 100%;
+}
+
+/* Help text, description, selected content */
+.form-control--has-help-text .form-control__help-text,
+.radio--has-description .radio__description,
+.checkbox--has-description .checkbox__description {
+  display: block;
+  color: var(--zn-input-help-text-color);
+  margin-top: var(--zn-spacing-x-small);
+}
+
+.radio--has-description .radio__description,
+.checkbox--has-description .checkbox__description {
+  margin-top: 0.375rem;
+}
+
+.radio--has-selected-content .radio__selected-content,
+.checkbox--has-selected-content .checkbox__selected-content {
+  display: block;
+  margin-top: var(--zn-spacing-small);
+}
+
+.form-control--has-help-text.form-control--small .form-control__help-text {
+  font-size: var(--zn-input-help-text-font-size-small);
+}
+
+.form-control--has-help-text.form-control--medium .form-control__help-text,
+.radio--has-description .radio__description,
+.checkbox--has-description .checkbox__description {
+  font-size: var(--zn-input-help-text-font-size-medium);
+}
+
+.form-control--has-help-text.form-control--large .form-control__help-text {
+  font-size: var(--zn-input-help-text-font-size-large);
+}
+
+.form-control--has-help-text.form-control--radio-group .form-control__help-text,
+.form-control--has-help-text.form-control--checkbox-group .form-control__help-text {
+  margin-top: var(--zn-spacing-medium);
+}
+
+.form-control--has-help-text .switch .form-control__help-text {
+  margin-top: var(--zn-spacing-3x-small);
+}
+
+.form-control--checkbox-contained-wrapper {
+  height: 100%;
+}

package/src/internal/animate.ts

@@ -0,0 +1,64 @@
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {
+  return new Promise(resolve => {
+    if (options?.duration === Infinity) {
+      throw new Error('Promise-based animations must be finite.');
+    }
+
+    const animation = el.animate(keyframes, {
+      ...options,
+      duration: prefersReducedMotion() ? 0 : options!.duration
+    });
+
+    animation.addEventListener('cancel', resolve, {once: true});
+    animation.addEventListener('finish', resolve, {once: true});
+  });
+}
+
+/** Parses a CSS duration and returns the number of milliseconds. */
+export function parseDuration(delay: number | string) {
+  delay = delay.toString().toLowerCase();
+
+  if (delay.indexOf('ms') > -1) {
+    return parseFloat(delay);
+  }
+
+  if (delay.indexOf('s') > -1) {
+    return parseFloat(delay) * 1000;
+  }
+
+  return parseFloat(delay);
+}
+
+/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
+export function prefersReducedMotion() {
+  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return query.matches;
+}
+
+/**
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+ */
+export function stopAnimations(el: HTMLElement) {
+  return Promise.all(
+    el.getAnimations().map(animation => {
+      return new Promise(resolve => {
+        animation.cancel();
+        requestAnimationFrame(resolve);
+      });
+    })
+  );
+}
+
+/**
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+ * element's scrollHeight before the animation.
+ */
+export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {
+  return keyframes.map(keyframe => ({
+    ...keyframe,
+    height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height
+  }));
+}

package/src/internal/default-value.ts

@@ -0,0 +1,49 @@
+// @defaultValue decorator
+//
+// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating
+// the observed property.
+//
+// The decorator checks whether the value of the attribute is different from the value of the property and in that case
+// it saves the new value.
+//
+//
+// Usage:
+//
+//  @property({ type: Boolean, reflect: true }) checked = false;
+//
+//  @defaultValue('checked') defaultChecked = false;
+//
+
+import { defaultConverter } from 'lit';
+import type { ReactiveElement } from 'lit';
+
+export const defaultValue =
+  (propertyName = 'value') =>
+  (proto: ReactiveElement, key: string) => {
+    const ctor = proto.constructor as typeof ReactiveElement;
+
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function (
+      this: ReactiveElement & { [name: string]: unknown },
+      name,
+      old,
+      value
+    ) {
+      const options = ctor.getPropertyOptions(propertyName);
+      const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;
+
+      if (name === attributeName) {
+        const converter = options.converter || defaultConverter;
+        const fromAttribute =
+          typeof converter === 'function' ? converter : converter?.fromAttribute ?? defaultConverter.fromAttribute;
+
+        const newValue: unknown = fromAttribute!(value, options.type);
+
+        if (this[propertyName] !== newValue) {
+          this[key] = newValue;
+        }
+      }
+
+      attributeChangedCallback.call(this, name, old, value);
+    };
+  };

package/src/internal/event.ts

@@ -0,0 +1,75 @@
+// Match event type name strings that are registered on GlobalEventHandlersEventMap...
+export type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap
+  ? // ...where the event detail is an object...
+  GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>
+    ? // ...that is non-empty...
+    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>
+      ? never
+      : // ...and has at least one non-optional property
+      Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']
+        ? never
+        : T
+    : never
+  : never;
+
+// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)
+export type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap
+  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>
+    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>
+      ? T
+      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']
+        ? T
+        : never
+    : T
+  : T;
+
+// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail
+export type EventTypesWithRequiredDetail = {
+  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
+};
+
+// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail
+export type EventTypesWithoutRequiredDetail = {
+  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
+};
+
+// Helper to make a specific property of an object non-optional
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
+// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than
+// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the
+// event requires it)
+export type ZincEventInit<T> = T extends keyof GlobalEventHandlersEventMap
+  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>
+    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>
+      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>
+      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']
+        ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>
+        : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>
+    : CustomEventInit
+  : CustomEventInit;
+
+// Given an event name string, get the type of the event
+export type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap
+  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>
+    ? GlobalEventHandlersEventMap[T]
+    : CustomEvent<unknown>
+  : CustomEvent<unknown>;
+
+// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message
+export type ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;
+
+
+export function waitForEvent(el: HTMLElement, eventName: string) {
+  return new Promise<void>(resolve => {
+    function done(event: Event) {
+      if (event.target === el) {
+        el.removeEventListener(eventName, done);
+        resolve();
+      }
+    }
+
+
+    el.addEventListener(eventName, done);
+  });
+}