@zeyos/zx 2.3.0 → 4.0.0

package/src/compat/map/select.js

@@ -1,198 +0,0 @@
-import { Http, Select as ZxSelect, zeyosService } from '../../index.js';
-import { GxWrapper } from '../base.js';
-import { LEGACY_EVENT_ARGS, translateSelectOptions } from './options.js';
-
-/** Shared Select facade; concrete subclasses choose filtering and warning identity. */
-class SelectBase extends GxWrapper {
-  static legacyName = 'gx.zeyos.Select';
-  /*
-   * Widened deliberately: the subclasses below set `'local' | 'async' | 'priority' | 'rest'`, and
-   * a static field annotated with that union would still clash with the `string` each subclass
-   * infers from its own literal. The static sides have to agree or the emitted declarations do
-   * not type-check for a consumer running without `skipLibCheck`.
-   */
-  /** @type {string|false} */
-  static filterMode = false;
-
-  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
-  constructor(display, options = {}) {
-    super(options, { data: [], elementIndex: 'ID', elementLabel: 'name', elementSelect: 'name', value: null });
-    const translated = translateSelectOptions(options);
-    translated.items = initialItems(options);
-    translated.valueKey = valueReader(options.elementIndex ?? 'ID');
-    translated.labelKey = labelReader(options.elementLabel ?? 'name');
-    translated.renderItem = typeof options.elementLabel === 'function' ? options.elementLabel : null;
-    translated.renderValue = selectionReader(options.elementSelect ?? options.elementLabel ?? 'name');
-    translated.value = options.value ?? null;
-    translated.filter = this.constructor.filterMode === 'local' ? 'local' :
-      (['async', 'rest'].includes(this.constructor.filterMode) ? (query) => this._load(query) : false);
-    translated.debounce = options.debounce ?? 200;
-    const component = this.constructor.filterMode === 'priority'
-      ? ZxSelect.priority(display, translated)
-      : new ZxSelect(display, translated);
-    this._attach(component, {
-      events: {
-        select: {
-          type: 'change', filter: (detail) => detail.item != null,
-          args: (detail) => LEGACY_EVENT_ARGS.select(detail, this)
-        },
-        noselect: {
-          type: 'change', filter: (detail) => detail.item == null,
-          args: (detail) => LEGACY_EVENT_ARGS.noselect(detail, this)
-        },
-        show: { type: 'open', args: () => [this] },
-        hide: { type: 'close', args: () => [this] },
-        requestSuccess: { type: 'loaded', args: (detail) => [detail.items] }
-      },
-      ui: { fieldset: 'control', textbox: 'input', dropdown: 'list', icon: 'toggle' },
-      setters: { data: 'setData', value: 'setId', disabled: (value) => value ? this.disable() : this.enable() }
-    });
-    this._http = null;
-    this.data = translated.items;
-  }
-
-  /** @param {unknown} selection @param {boolean} [noEvents=false] @returns {this} */
-  set(selection, noEvents = false) { this._zx.set(selection, { silent: Boolean(noEvents) }); return this; }
-  /** @param {unknown} id @param {boolean} [noEvents=false] @returns {this} */
-  setId(id, noEvents = false) {
-    const item = this.data?.find((candidate) => readValue(candidate, this.options.elementIndex ?? 'ID') == id);
-    this._zx.set(item ?? id, { silent: Boolean(noEvents) }); return this;
-  }
-  /** @param {unknown} [item] @returns {unknown} */
-  getId(item) { return item == null ? this._zx.value : readValue(item, this.options.elementIndex ?? 'ID'); }
-  /** @returns {unknown} */
-  getValue() { return this._zx.value; }
-  /** @returns {unknown} */
-  getSelected() { return this._zx.selected; }
-  /** @param {unknown[]} data @returns {this} */
-  setData(data) { this.data = Array.isArray(data) ? data.slice() : []; this._zx.setItems(this.data); return this; }
-  /** @returns {Element[]} */
-  getRows() { return Array.from(this.display('dropdown')?.querySelectorAll?.('[role="option"]') ?? []); }
-  /** @param {boolean} [noEvents=false] @returns {this} */
-  reset(noEvents = false) { this._zx.set(null, { silent: Boolean(noEvents) }); return this; }
-  /** @returns {this} */
-  enable() { this._zx.enable(); return this; }
-  /** @returns {this} */
-  disable() { this._zx.disable(); return this; }
-  /** @returns {this} */
-  show() { this._zx.open(); return this; }
-  /** @returns {this} */
-  hide() { this._zx.close(); return this; }
-  /** @returns {boolean} */
-  isOpen() { return this.toElement().getAttribute('data-state') === 'open'; }
-  /** @returns {this} */
-  search() { this._zx.open(); return this; }
-  /** @returns {this} */
-  showLoader() { return this; }
-  /** @returns {this} */
-  hideLoader() { return this; }
-
-  /** @param {string} query @returns {Promise<unknown[]>} */
-  async _load(query) {
-    try {
-      const result = this.constructor.filterMode === 'rest'
-        ? await this._loadRest(query)
-        : await this._loadUrl(query);
-      const rows = Array.isArray(result) ? result : [];
-      this.data = rows;
-      return rows;
-    } catch (error) {
-      this.fireEvent('requestFailure', [error]);
-      throw error;
-    }
-  }
-
-  /** @param {string} query @returns {Promise<unknown>} */
-  _loadUrl(query) {
-    this._http ??= new Http({ headers: this.options.requestHeader ?? {} });
-    const requestData = { ...(this.options.requestData ?? {}) };
-    const queryData = typeof this.options.queryParam === 'function'
-      ? this.options.queryParam(query, requestData)
-      : { ...requestData, [this.options.queryParam ?? 'query']: query };
-    const method = String(this.options.method ?? 'GET').toUpperCase();
-    return this._http.request(String(this.options.url ?? './'), method === 'GET'
-      ? { method, query: queryData }
-      : { method, data: queryData });
-  }
-
-  /** @param {string} query @returns {Promise<unknown>} */
-  _loadRest(query) {
-    this._http ??= zeyosService(String(this.options.entity ?? ''), String(this.options.accesskey ?? ''), {
-      apiBase: this.options.apiBase ?? '../remotecall/'
-    });
-    return this._http.get('', { ...(this.options.requestData ?? {}), search: query, limit: this.options.limit ?? 50 });
-  }
-}
-
-/** Legacy ZeyOS select. */
-export class Select extends SelectBase { static legacyName = 'gx.zeyos.Select'; }
-/** Legacy ZeyOS locally filterable select. */
-export class SelectFilter extends SelectBase { static legacyName = 'gx.zeyos.SelectFilter'; static filterMode = 'local'; }
-/** Legacy ZeyOS HTTP-backed select. */
-export class SelectDyn extends SelectBase { static legacyName = 'gx.zeyos.SelectDyn'; static filterMode = 'async'; }
-/** Legacy ZeyOS priority select. */
-export class SelectPrio extends SelectBase { static legacyName = 'gx.zeyos.SelectPrio'; static filterMode = 'priority'; }
-
-/** Legacy bootstrap select. */
-export class BootstrapSelect extends SelectBase { static legacyName = 'gx.bootstrap.Select'; }
-/** Legacy bootstrap locally filterable select. */
-export class BootstrapSelectFilter extends SelectBase { static legacyName = 'gx.bootstrap.SelectFilter'; static filterMode = 'local'; }
-/** Legacy bootstrap HTTP-backed select. */
-export class BootstrapSelectDyn extends SelectBase { static legacyName = 'gx.bootstrap.SelectDyn'; static filterMode = 'async'; }
-/** Legacy bootstrap REST-backed select. */
-export class SelectDynREST extends SelectBase {
-  static legacyName = 'gx.bootstrap.SelectDynREST';
-  static filterMode = 'rest';
-
-  /** Loads and selects a REST item by ID when it is not already cached. @param {unknown} id @returns {Promise<void>} */
-  async setEntityId(id) {
-    const cached = this.data?.find((item) => Object.is(readValue(item, this.options.elementIndex ?? 'ID'), id));
-    if (cached) { this.set(cached); return; }
-    if (id == null || id === '') return;
-    try {
-      this._http ??= zeyosService(String(this.options.entity ?? ''), String(this.options.accesskey ?? ''), {
-        apiBase: this.options.apiBase ?? '../remotecall/'
-      });
-      const item = await this._http.get(String(id));
-      if (item) this.set(item);
-    } catch (error) {
-      this.fireEvent('requestFailure', [error]);
-      throw error;
-    }
-  }
-}
-/** Legacy bootstrap priority select. */
-export class BootstrapSelectPrio extends SelectBase { static legacyName = 'gx.bootstrap.SelectPrio'; static filterMode = 'priority'; }
-
-/** @param {Record<string, any>} options @returns {unknown[]} */
-function initialItems(options) {
-  const items = Array.isArray(options.data) ? options.data.slice() : [];
-  return options.elementDefault == null ? items : [options.elementDefault, ...items];
-}
-
-/** @param {string|Function} reader @returns {string|Function} */
-function valueReader(reader) {
-  return typeof reader === 'function' ? reader : String(reader);
-}
-
-/** @param {string|Function} reader @returns {string|Function} */
-function labelReader(reader) {
-  if (typeof reader !== 'function') return String(reader);
-  return (item) => renderedText(reader(item));
-}
-
-/** @param {string|Function} reader @returns {(item: unknown) => string} */
-function selectionReader(reader) {
-  return (item) => renderedText(readValue(item, reader));
-}
-
-/** @param {unknown} item @param {string|Function} reader @returns {unknown} */
-function readValue(item, reader) {
-  return typeof reader === 'function' ? reader(item) : item?.[reader];
-}
-
-/** @param {unknown} value @returns {string} */
-function renderedText(value) {
-  if (value?.nodeType) return value.textContent ?? '';
-  return String(value ?? '');
-}

package/src/compat/map/stubs.js

@@ -1,26 +0,0 @@
-/** Creates a direct-construction stub with an actionable migration error. */
-function migrationStub(legacyName, replacement) {
-  return class LegacyMigrationStub {
-    /** @throws {Error} Always; this API needs an explicit migration. */
-    constructor() {
-      throw new Error(`${legacyName} is not emulated by Zx; migrate to ${replacement}`);
-    }
-  };
-}
-
-/** Direct Settings subclassing is intentionally outside the compatibility contract. */
-export const Settings = migrationStub('gx.core.Settings', 'plain option objects');
-/** Direct Container subclassing is intentionally outside the compatibility contract. */
-export const Container = migrationStub('gx.ui.Container', 'zx.Component');
-/** Legacy collapse animation stub. */
-export const Collapse = migrationStub('gx.ui.Collapse', 'CSS transitions');
-/** Legacy blend animation stub. */
-export const Blend = migrationStub('gx.ui.Blend', 'CSS transitions');
-/** Legacy HUD stub. */
-export const Hud = migrationStub('gx.ui.Hud', 'zx.Dialog');
-/** Legacy toggling helper stub. */
-export const Toggling = migrationStub('gx.ui.Toggling', 'zx.Toggle');
-/** Legacy horizontal group stub. */
-export const HGroup = migrationStub('gx.ui.HGroup', 'CSS layout');
-/** Legacy templates stub. */
-export const Templates = migrationStub('gx.ui.Templates', 'native template elements');

package/src/compat/map/utilities.js

@@ -1,113 +0,0 @@
-import { parse } from '../globals.js';
-
-/** Legacy utility namespace backed by dependency-free implementations. */
-export const util = Object.freeze({
-  initValue,
-  initNum,
-  formatTime,
-  getMinutes,
-  formatNum,
-  getNumber,
-  printf,
-  parseResult,
-  Parse: parse,
-  isArray: Array.isArray,
-  isObject: (value) => value !== null && typeof value === 'object' && !Array.isArray(value) &&
-    !(typeof Node !== 'undefined' && value instanceof Node) && !(value instanceof Date),
-  isFunction: (value) => typeof value === 'function',
-  isString: (value) => typeof value === 'string',
-  isNumber: (value) => typeof value === 'number' && Number.isFinite(value),
-  isElement: (value) => typeof Element !== 'undefined' && value instanceof Element,
-  isNode: (value) => typeof Node !== 'undefined' && value instanceof Node,
-  Console: (source, message) => {
-    if (typeof console === 'undefined') return;
-    if (message instanceof Error) console.error(source, message.stack);
-    else console.log(`${source}: ${message}`);
-  }
-});
-
-/** @param {Record<string, unknown>} object @param {string} key @param {unknown} fallback @returns {unknown} */
-export function initValue(object, key, fallback) {
-  return object?.[key] == null ? fallback : object[key];
-}
-
-/** @param {unknown} value @returns {number} */
-export function initNum(value) {
-  if (typeof value === 'number') return value;
-  if (typeof value === 'string') return Number.parseFloat(value);
-  return 0;
-}
-
-/** @param {unknown} value @returns {string} */
-export function formatTime(value) {
-  let minutes = value;
-  if (typeof minutes === 'string') {
-    if (/^[0-9]+:[0-9]{2}$/.test(minutes)) return minutes;
-    if (/^[0-9]+:[0-9]{2,}$/.test(minutes)) {
-      const digits = minutes.replace(/[^0-9]/g, '');
-      return digits.replace(/([0-9]{2})$/, ':$1');
-    }
-    minutes = Number.parseInt(minutes.replace(/[^0-9]/g, ''), 10);
-  }
-  if (minutes == null || Number.isNaN(Number(minutes))) return '0:00';
-  let number = Number(minutes);
-  const prefix = number < 0 ? '-' : '';
-  number = Math.abs(number);
-  return `${prefix}${Math.floor(number / 60)}:${pad(number % 60)}`;
-}
-
-/** @param {unknown} value @returns {number} */
-export function getMinutes(value) {
-  const parts = String(value ?? '').replace(/[^0-9:]/, '').split(':');
-  if (parts.length === 1) return Number.parseInt(parts[0], 10);
-  return Number.parseInt(parts[0], 10) * 60 + Number.parseInt(parts[1], 10);
-}
-
-/** @param {unknown} value @param {string} [decimal='.'] @param {string} [thousands=','] @param {number} [decimals=2] @returns {string} */
-export function formatNum(value, decimal = '.', thousands = ',', decimals = 2) {
-  let number = value;
-  if (typeof number === 'string') {
-    number = Number.parseFloat(number.replace(new RegExp(`[^0-9${escapeRegExp(decimal)}]`), '').replace(decimal, '.'));
-  }
-  if (Number.isNaN(Number(number))) number = 0;
-  const precision = typeof decimals === 'number' ? decimals : 2;
-  let formatted = Math.round(Number(number) * (10 ** precision)).toString();
-  for (let index = formatted.length; index <= precision; index += 1) formatted = `0${formatted}`;
-  const position = formatted.length - precision;
-  if (precision > 0) formatted = `${formatted.slice(0, position)}${decimal}${formatted.slice(position)}`;
-  for (let index = position - 3; index > 0; index -= 3) {
-    formatted = `${formatted.slice(0, index)}${thousands}${formatted.slice(index)}`;
-  }
-  return formatted;
-}
-
-/** @param {unknown} value @param {string} [decimal=','] @returns {number} */
-export function getNumber(value, decimal = '.') {
-  return Number.parseFloat(String(value ?? '').replace(new RegExp(`[^0-9${escapeRegExp(decimal)}]`), '').replace(decimal, '.'));
-}
-
-/** @param {unknown} template @param {unknown|unknown[]} [values=[]] @returns {string} */
-export function printf(template, values = []) {
-  const replacements = Array.isArray(values) ? values : [values];
-  let index = 0;
-  return String(template ?? '').replace(/%arg%/g, (match) => index < replacements.length ? String(replacements[index++]) : match);
-}
-
-/** @param {unknown} response @returns {unknown} */
-export function parseResult(response) {
-  const data = typeof response === 'string' ? JSON.parse(response) : response;
-  if (!data || typeof data !== 'object') throw new Error('Invalid server response');
-  if (data.error) throw new Error(String(data.error.message ?? data.error));
-  if (!Object.hasOwn(data, 'result') || data.result == null) throw new Error('Undefined result');
-  return data.result;
-}
-
-/** @param {number} value @returns {string} */
-function pad(value) {
-  return String(value).padStart(2, '0');
-}
-
-/** @param {string} value @returns {string} */
-function escapeRegExp(value) {
-  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}

package/src/compat-entry.js

@@ -1,11 +0,0 @@
-/** Browser entry point for the gx compatibility bundle. */
-import * as zx from './index.js';
-import gx, { install, installElementStorage } from './compat/index.js';
-
-const host = typeof window === 'undefined' ? globalThis : window;
-installElementStorage(host);
-install(host);
-host.zx = zx;
-
-export { gx, zx };
-export default gx;

package/src/components/permission/permission.css

@@ -1,47 +0,0 @@
-.zx-permission {
-  min-inline-size: 0;
-  color: var(--zx-color-text);
-  font-size: var(--zx-control-font-size);
-}
-
-.zx-permission__choices {
-  display: grid;
-  grid-template-columns: repeat(3, max-content) minmax(160px, 1fr);
-  align-items: center;
-  gap: var(--zx-space-2) var(--zx-space-4);
-}
-
-.zx-permission__choice {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
-  cursor: pointer;
-}
-
-.zx-permission__choice input {
-  accent-color: var(--zx-color-accent);
-}
-
-.zx-permission__choice:has(input:focus-visible) {
-  border-radius: var(--zx-radius-sm);
-  box-shadow: var(--zx-focus-ring);
-}
-
-.zx-permission__groups {
-  min-inline-size: 160px;
-}
-
-.zx-permission:not([data-state="group"]) .zx-permission__groups {
-  color: var(--zx-color-text-muted);
-}
-
-@media (max-width: 640px) {
-  .zx-permission__choices {
-    grid-template-columns: 1fr;
-  }
-
-  .zx-permission__groups {
-    inline-size: 100%;
-  }
-}

package/src/components/permission/permission.js

@@ -1,201 +0,0 @@
-import { Component } from '../../core/component.js';
-import { h } from '../../core/dom.js';
-import { uid } from '../../core/util.js';
-import { Select } from '../select/select.js';
-
-/** @typedef {Record<string, any>|string|number|boolean|symbol|bigint|null|undefined} PermissionGroup */
-/**
- * @typedef {Object} PermissionOptions
- * @property {boolean|string|number|symbol|bigint|null} [value=true] Public, private, or group ID.
- * @property {PermissionGroup[]} [groups=[]] Available groups.
- * @property {string|((item: PermissionGroup) => unknown)} [groupsValueKey='ID'] Group ID property or reader.
- * @property {string|((item: PermissionGroup) => string)} [groupsLabelKey='name'] Group label property or reader.
- * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
- * @property {(event: CustomEvent<PermissionChangeDetail>) => void} [onchange] Change listener.
- */
-/** @typedef {{value: unknown}} PermissionChangeDetail */
-
-/**
- * Record-permission choice for private, public, and group access.
- *
- * @deprecated Use `Select.permission(target, {groups})`, which carries the same tri-state value in
- * one control and accepts a loader function for installations whose group list is too long to ship
- * with the form. This class stays for `gx.zeyos.Permission` and will be removed in 3.0.
- * @fires Permission#change
- * @extends {Component<PermissionOptions>}
- */
-export class Permission extends Component {
-  static cssName = 'permission';
-
-  /** @type {PermissionOptions} */
-  static defaults = {
-    value: true,
-    groups: [],
-    groupsValueKey: 'ID',
-    groupsLabelKey: 'name'
-  };
-
-
-  /** @returns {HTMLElement} */
-  render() {
-    // Instance state initialized here because render() runs inside the base
-    // constructor, before class-field initializers would run (and clobber it).
-    this._mode = 'public'; this._groupValue = null; this._groupSelect = null; this._createdRoot = false; this._originalChildren = []; this._root = null; this._originalState = null;
-    this._createdRoot = this.el === null;
-    const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
-    this.el = root;
-    this._root = root;
-    if (!this._createdRoot) {
-      this._originalChildren = Array.from(root.childNodes);
-      this._originalState = root.getAttribute('data-state');
-    }
-    const name = uid('zx-permission');
-    const choices = h('div', {
-      class: 'zx-permission__choices',
-      role: 'radiogroup',
-      ariaLabel: this._message('permission.label', 'Permission')
-    });
-    const privateChoice = this._choice(name, 'private', this._message('permission.private', 'Private'));
-    const publicChoice = this._choice(name, 'public', this._message('permission.public', 'Public'));
-    const groupChoice = this._choice(name, 'group', this._message('permission.group', 'Group'));
-    const groupHost = h('div', { ref: 'groupHost', class: 'zx-permission__groups' });
-    choices.append(privateChoice.label, publicChoice.label, groupChoice.label, groupHost);
-    root.replaceChildren(choices);
-    this.refs.private = privateChoice.input;
-    this.refs.public = publicChoice.input;
-    this.refs.group = groupChoice.input;
-
-    this._groupSelect = new Select(groupHost, {
-      items: Array.isArray(this.options.groups) ? this.options.groups : [],
-      valueKey: this.options.groupsValueKey,
-      labelKey: this.options.groupsLabelKey,
-      placeholder: this._message('permission.group', 'Group')
-    });
-    this._groupSelect.refs.input.setAttribute(
-      'aria-label',
-      this._message('permission.group', 'Group')
-    );
-    for (const input of [privateChoice.input, publicChoice.input, groupChoice.input]) {
-      this.listen(input, 'change', () => {
-        if (!input.checked) return;
-        if (input.value === 'group') this._selectGroupMode();
-        else this.set(input.value);
-      });
-    }
-    this.listen(groupHost, 'zx-change', (event) => {
-      event.stopPropagation();
-      if (this._mode !== 'group') return;
-      const previous = this.get();
-      this._groupValue = /** @type {CustomEvent} */ (event).detail.value;
-      const value = this.get();
-      if (!Object.is(previous, value)) this.emit('change', { value });
-    });
-
-    this.set(this.options.value, { silent: true });
-    return root;
-  }
-
-  /** Returns the normalized permission value. @returns {'private'|'public'|unknown} */
-  get() {
-    if (this._mode === 'private') return 'private';
-    if (this._mode === 'public') return 'public';
-    return this._groupValue;
-  }
-
-  /**
-   * Sets a public, private, or group permission.
-   * @param {boolean|string|number|symbol|bigint|null} value Permission value.
-   * @param {{silent?: boolean}} [options={}] Update behavior.
-   * @returns {this}
-   * @fires Permission#change
-   */
-  set(value, { silent = false } = {}) {
-    const previous = this.get();
-    if (value === true || value === 'public') {
-      this._mode = 'public';
-    } else if (value === false || value === 'private') {
-      this._mode = 'private';
-    } else {
-      this._mode = 'group';
-      this._groupValue = value;
-      this._groupSelect?.set(value, { silent: true });
-    }
-    this._sync();
-    const next = this.get();
-    if (!silent && !Object.is(previous, next)) this.emit('change', { value: next });
-    return this;
-  }
-
-  /** Destroys the embedded Select and restores an enhanced target. @returns {void} */
-  destroy() {
-    this._groupSelect?.destroy();
-    this._groupSelect = null;
-    if (!this._createdRoot && this.el) {
-      this.el.replaceChildren(...this._originalChildren);
-      if (this._originalState === null) this.el.removeAttribute('data-state');
-      else this.el.setAttribute('data-state', this._originalState);
-    }
-    super.destroy();
-  }
-
-  /** @returns {void} */
-  _selectGroupMode() {
-    const previous = this.get();
-    this._mode = 'group';
-    if (this._groupValue == null) {
-      const first = Array.isArray(this.options.groups) ? this.options.groups[0] : null;
-      this._groupValue = first == null ? null : read(first, this.options.groupsValueKey);
-    }
-    this._groupSelect?.set(this._groupValue, { silent: true });
-    this._sync();
-    const next = this.get();
-    if (!Object.is(previous, next)) this.emit('change', { value: next });
-  }
-
-  /** @returns {void} */
-  _sync() {
-    /** @type {HTMLInputElement} */ (this.refs.private).checked = this._mode === 'private';
-    /** @type {HTMLInputElement} */ (this.refs.public).checked = this._mode === 'public';
-    /** @type {HTMLInputElement} */ (this.refs.group).checked = this._mode === 'group';
-    if (this._mode === 'group') this._groupSelect?.enable();
-    else this._groupSelect?.disable();
-    this._root?.setAttribute('data-state', this._mode);
-  }
-
-  /**
-   * @param {string} name
-   * @param {'private'|'public'|'group'} value
-   * @param {string} text
-   * @returns {{label: HTMLLabelElement, input: HTMLInputElement}}
-   */
-  _choice(name, value, text) {
-    const input = /** @type {HTMLInputElement} */ (h('input', {
-      type: 'radio',
-      name,
-      value
-    }));
-    const label = /** @type {HTMLLabelElement} */ (h('label', {
-      class: 'zx-permission__choice'
-    }, input, h('span', {}, text)));
-    return { label, input };
-  }
-
-  /** @param {string} key @param {string} fallback @returns {string} */
-  _message(key, fallback) {
-    const message = this.msg(key);
-    return message === key ? fallback : message;
-  }
-}
-
-/** Permission-value change. @event Permission#change @type {CustomEvent<PermissionChangeDetail>} */
-
-/**
- * @param {PermissionGroup} item
- * @param {string|((item: PermissionGroup) => unknown)} reader
- * @returns {unknown}
- */
-function read(item, reader) {
-  if (typeof reader === 'function') return reader(item);
-  if (item === null || typeof item !== 'object') return item;
-  return item[reader];
-}