@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-choice.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-choice.mjs","names":[],"sources":["../../../projects/hyalo/choice/checkbox.ts","../../../projects/hyalo/choice/checkbox.html","../../../projects/hyalo/choice/radio.ts","../../../projects/hyalo/choice/radio-group.html","../../../projects/hyalo/choice/radio.html","../../../projects/hyalo/choice/switch.ts","../../../projects/hyalo/choice/switch.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport type { FormCheckboxControl } from '@angular/forms/signals';\r\nimport { injectId } from '@hyalo/angular/core';\r\n\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\n/**\r\n * A checkbox with a label. It wraps a real `<input type=\"checkbox\">`, so\r\n * Space toggles it, clicking the label works and forms see it.\r\n *\r\n * ```html\r\n * <hy-checkbox [formField]=\"form.terms\">I accept the terms</hy-checkbox>\r\n * <hy-checkbox [(checked)]=\"all\" [indeterminate]=\"some\">Select all</hy-checkbox>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-checkbox',\r\n  imports: [HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-choice hy-checkbox',\r\n    '[attr.data-checked]': 'checked() || null',\r\n    '[attr.data-indeterminate]': 'indeterminate() || null',\r\n    '[attr.data-disabled]': 'disabled() || null',\r\n    '[attr.data-invalid]': '(invalid() && touched()) || null',\r\n  },\r\n  templateUrl: './checkbox.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HyCheckbox implements FormCheckboxControl {\r\n  protected readonly descriptionId = injectId('checkbox-desc');\r\n\r\n  /** Whether the box is checked. Two-way bindable and works with `[formField]`. */\r\n  readonly checked = model(false);\r\n  /** Shows a dash for a partly selected group. Cleared when the user toggles. */\r\n  readonly indeterminate = model(false);\r\n  /** Secondary text under the label. */\r\n  readonly description = input<string>();\r\n  readonly name = input('');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  readonly invalid = input(false, { transform: booleanAttribute });\r\n  readonly touched = input(false, { transform: booleanAttribute });\r\n  /** Emits when focus leaves the checkbox. */\r\n  readonly touch = output<void>();\r\n\r\n  protected onChange(event: Event): void {\r\n    this.indeterminate.set(false);\r\n    this.checked.set((event.target as HTMLInputElement).checked);\r\n  }\r\n}\r\n","<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-checkbox__box\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [indeterminate]=\"indeterminate()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-invalid]=\"(invalid() && touched()) || null\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <hy-icon\r\n      class=\"hy-checkbox__mark\"\r\n      [name]=\"indeterminate() ? 'minus' : 'check'\"\r\n      [strokeWidth]=\"2.5\"\r\n    />\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport type { FormValueControl } from '@angular/forms/signals';\r\nimport { injectId } from '@hyalo/angular/core';\r\n\r\n/**\r\n * A group of radio buttons. Holds the value; the radios inside only say\r\n * which value they stand for.\r\n *\r\n * ```html\r\n * <hy-radio-group label=\"Delivery\" [formField]=\"form.delivery\">\r\n *   <hy-radio value=\"standard\" description=\"3 to 5 days\">Standard</hy-radio>\r\n *   <hy-radio value=\"express\">Express</hy-radio>\r\n * </hy-radio-group>\r\n * ```\r\n *\r\n * The radios are native inputs sharing one name, so arrow keys move the\r\n * selection the way the platform does, including in RTL.\r\n */\r\n@Component({\r\n  selector: 'hy-radio-group',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-radio-group',\r\n    role: 'radiogroup',\r\n    '[attr.aria-labelledby]': 'label() ? labelId : null',\r\n    '[attr.aria-invalid]': 'showsError() || null',\r\n    '[attr.aria-required]': 'required() || null',\r\n    '[attr.data-orientation]': 'orientation()',\r\n  },\r\n  templateUrl: './radio-group.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HyRadioGroup<T> implements FormValueControl<T | undefined> {\r\n  protected readonly labelId = injectId('radio-label');\r\n  private readonly generatedName = injectId('radio');\r\n\r\n  /** Selected value. Two-way bindable and works with `[formField]`. */\r\n  readonly value = model<T | undefined>(undefined);\r\n  /** Visible group label. */\r\n  readonly label = input<string>();\r\n  /** Shared input name. Generated when not set. */\r\n  readonly name = input('');\r\n  readonly orientation = input<'vertical' | 'horizontal'>('vertical');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  readonly invalid = input(false, { transform: booleanAttribute });\r\n  readonly touched = input(false, { transform: booleanAttribute });\r\n  readonly errors = input<readonly { readonly kind: string; readonly message?: string }[]>([]);\r\n  /** Emits when focus leaves a radio. */\r\n  readonly touch = output<void>();\r\n\r\n  readonly groupName = computed(() => this.name() || this.generatedName);\r\n  protected readonly showsError = computed(() => this.invalid() && this.touched());\r\n  protected readonly errorMessage = computed(() => {\r\n    const first = this.errors()[0];\r\n    return first ? (first.message ?? first.kind) : '';\r\n  });\r\n}\r\n\r\n/** One option inside a `hy-radio-group`. */\r\n@Component({\r\n  selector: 'hy-radio',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-choice hy-radio',\r\n    '[attr.data-checked]': 'checked() || null',\r\n    '[attr.data-disabled]': 'isDisabled() || null',\r\n  },\r\n  templateUrl: './radio.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HyRadio<T> {\r\n  protected readonly group = inject<HyRadioGroup<T>>(HyRadioGroup);\r\n  protected readonly descriptionId = injectId('radio-desc');\r\n\r\n  /** The value this radio selects. */\r\n  readonly value = input.required<T>();\r\n  /** Secondary text under the label. */\r\n  readonly description = input<string>();\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n\r\n  protected readonly checked = computed(() => this.group.value() === this.value());\r\n  protected readonly isDisabled = computed(() => this.disabled() || this.group.disabled());\r\n}\r\n","@if (label()) {\r\n  <span class=\"hy-radio-group__label\" [id]=\"labelId\">{{ label() }}</span>\r\n}\r\n<div class=\"hy-radio-group__items\"><ng-content /></div>\r\n@if (showsError()) {\r\n  <p class=\"hy-choice__error\">{{ errorMessage() }}</p>\r\n}\r\n","<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-radio__circle\">\r\n    <input\r\n      type=\"radio\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"group.groupName()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"group.value.set(value())\"\r\n      (blur)=\"group.touch.emit()\"\r\n    />\r\n    <span class=\"hy-radio__dot\" aria-hidden=\"true\"></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport type { FormCheckboxControl } from '@angular/forms/signals';\r\nimport { injectId } from '@hyalo/angular/core';\r\nimport { rubberband } from '@hyalo/angular/motion';\r\n\r\n/** Movement before a press on the track turns into a drag, in px. */\r\nconst SLOP = 4;\r\n/** Track padding on each side, in px. Matches choice.css. */\r\nconst TRACK_PADDING = 2;\r\n/** Width of the pressed thumb, in rem. Matches choice.css. */\r\nconst PRESSED_THUMB = 1.5;\r\n\r\n/**\r\n * An on/off switch for settings that apply right away. For choices that\r\n * are submitted with a form, a checkbox is usually clearer.\r\n *\r\n * It is a native checkbox with `role=\"switch\"`, so screen readers say\r\n * \"on\" and \"off\" and Space toggles it. The thumb can also be dragged: it\r\n * follows the pointer, and lands on whichever side it is let go nearer.\r\n *\r\n * ```html\r\n * <hy-switch [(checked)]=\"notifications\">Email notifications</hy-switch>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-switch',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-choice hy-switch',\r\n    '[attr.data-checked]': 'checked() || null',\r\n    '[attr.data-disabled]': 'disabled() || null',\r\n  },\r\n  templateUrl: './switch.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HySwitch implements FormCheckboxControl {\r\n  protected readonly descriptionId = injectId('switch-desc');\r\n  /** Physical thumb offset in px while it is dragged, otherwise null. */\r\n  protected readonly drag = signal<number | null>(null);\r\n  private press: { x: number; from: number; travel: number; dir: number; pos: number } | null =\r\n    null;\r\n  /** Where a finished drag landed, until the click it causes is handled. */\r\n  private landed: boolean | null = null;\r\n\r\n  /** Whether the switch is on. Two-way bindable and works with `[formField]`. */\r\n  readonly checked = model(false);\r\n  /** Secondary text under the label. */\r\n  readonly description = input<string>();\r\n  readonly name = input('');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  /** Emits when focus leaves the switch. */\r\n  readonly touch = output<void>();\r\n\r\n  protected onChange(event: Event): void {\r\n    this.checked.set((event.target as HTMLInputElement).checked);\r\n  }\r\n\r\n  protected onDown(event: PointerEvent): void {\r\n    if (this.disabled() || event.button !== 0) return;\r\n    const track = event.currentTarget as HTMLElement;\r\n    const rem = parseFloat(getComputedStyle(track.ownerDocument.documentElement).fontSize) || 16;\r\n    const travel = track.clientWidth - 2 * TRACK_PADDING - PRESSED_THUMB * rem;\r\n    this.press = {\r\n      x: event.clientX,\r\n      from: this.checked() ? travel : 0,\r\n      travel,\r\n      dir: getComputedStyle(track).direction === 'rtl' ? -1 : 1,\r\n      pos: this.checked() ? travel : 0,\r\n    };\r\n  }\r\n\r\n  protected onMove(event: PointerEvent): void {\r\n    const press = this.press;\r\n    if (!press) return;\r\n    const moved = (event.clientX - press.x) * press.dir;\r\n    if (this.drag() === null) {\r\n      if (Math.abs(moved) < SLOP) return;\r\n      try {\r\n        (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\r\n      } catch {\r\n        // The pointer is already gone; the drag still ends on pointerup.\r\n      }\r\n    }\r\n    // Past either end the thumb resists instead of stopping dead.\r\n    const raw = press.from + moved;\r\n    const over = raw < 0 ? raw : raw > press.travel ? raw - press.travel : 0;\r\n    press.pos = Math.min(Math.max(raw, 0), press.travel) + rubberband(over, press.travel);\r\n    this.drag.set(press.pos * press.dir);\r\n  }\r\n\r\n  protected onUp(cancelled = false): void {\r\n    const press = this.press;\r\n    this.press = null;\r\n    if (!press || this.drag() === null) return;\r\n    this.drag.set(null);\r\n    // Decided in logical position, so it is the same in both directions.\r\n    const on = press.pos > press.travel / 2;\r\n    if (cancelled) {\r\n      this.checked.set(on);\r\n      return;\r\n    }\r\n    // The release also clicks the label. That click applies the drag\r\n    // instead of toggling; if no click comes, apply it anyway.\r\n    this.landed = on;\r\n    setTimeout(() => {\r\n      if (this.landed === null) return;\r\n      this.checked.set(this.landed);\r\n      this.landed = null;\r\n    });\r\n  }\r\n\r\n  protected onClick(event: MouseEvent): void {\r\n    if (this.landed === null) return;\r\n    event.preventDefault();\r\n    this.checked.set(this.landed);\r\n    this.landed = null;\r\n  }\r\n}\r\n","<label class=\"hy-choice__row\">\r\n  <span\r\n    class=\"hy-choice__control hy-switch__track\"\r\n    (pointerdown)=\"onDown($event)\"\r\n    (pointermove)=\"onMove($event)\"\r\n    (pointerup)=\"onUp()\"\r\n    (pointercancel)=\"onUp(true)\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"onClick($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <span\r\n      class=\"hy-switch__thumb\"\r\n      aria-hidden=\"true\"\r\n      [attr.data-dragging]=\"drag() === null ? null : ''\"\r\n      [style.--_drag.px]=\"drag()\"\r\n    ></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-code-block-highlight-B20d5C76.mjs

@@ -0,0 +1,40 @@
+import hljs from "highlight.js/lib/core";
+const languages = {
+	typescript: () => import("highlight.js/lib/languages/typescript"),
+	javascript: () => import("highlight.js/lib/languages/javascript"),
+	css: () => import("highlight.js/lib/languages/css"),
+	html: () => import("highlight.js/lib/languages/xml"),
+	json: () => import("highlight.js/lib/languages/json"),
+	bash: () => import("highlight.js/lib/languages/bash")
+};
+const pending = /* @__PURE__ */ new Map();
+async function highlight(code, language) {
+	const name = {
+		ts: "typescript",
+		js: "javascript",
+		xml: "html",
+		sh: "bash"
+	}[language] ?? language;
+	if (!(name in languages)) return null;
+	let ready = pending.get(name);
+	if (!ready) {
+		const load = languages[name];
+		ready = load().then((module) => {
+			hljs.registerLanguage(name, module.default);
+		});
+		pending.set(name, ready);
+	}
+	try {
+		await ready;
+		return hljs.highlight(code, {
+			language: name,
+			ignoreIllegals: true
+		}).value;
+	} catch {
+		pending.delete(name);
+		return null;
+	}
+}
+export { highlight };
+
+//# sourceMappingURL=hyalo-angular-code-block-highlight-B20d5C76.mjs.map

package/fesm2022/hyalo-angular-code-block-highlight-B20d5C76.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-code-block-highlight-B20d5C76.mjs","names":[],"sources":["../../../projects/hyalo/code-block/highlight.ts"],"sourcesContent":["import hljs from 'highlight.js/lib/core';\r\nconst languages = {\r\n  typescript: () => import('highlight.js/lib/languages/typescript'),\r\n  javascript: () => import('highlight.js/lib/languages/javascript'),\r\n  css: () => import('highlight.js/lib/languages/css'),\r\n  html: () => import('highlight.js/lib/languages/xml'),\r\n  json: () => import('highlight.js/lib/languages/json'),\r\n  bash: () => import('highlight.js/lib/languages/bash'),\r\n};\r\nconst pending = new Map<string, Promise<void>>();\r\nexport async function highlight(code: string, language: string): Promise<string | null> {\r\n  const name =\r\n    ({ ts: 'typescript', js: 'javascript', xml: 'html', sh: 'bash' } as Record<string, string>)[\r\n      language\r\n    ] ?? language;\r\n  if (!(name in languages)) return null;\r\n  let ready = pending.get(name);\r\n  if (!ready) {\r\n    const load = languages[name as keyof typeof languages];\r\n    ready = load().then((module) => {\r\n      hljs.registerLanguage(name, module.default);\r\n    });\r\n    pending.set(name, ready);\r\n  }\r\n  try {\r\n    await ready;\r\n    return hljs.highlight(code, { language: name, ignoreIllegals: true }).value;\r\n  } catch {\r\n    pending.delete(name);\r\n    return null;\r\n  }\r\n}\r\n"],"mappings":";AACA,MAAM,YAAY;CAChB,kBAAkB,OAAO;CACzB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,YAAY,OAAO;AACpB;AACD,MAAM,0BAAU,IAAI,IAAG;AACvB,eAAsB,UAAU,MAAc,UAAgB;CAC5D,MAAM,OACH;EAAE,IAAI;EAAc,IAAI;EAAc,KAAK;EAAQ,IAAI;CAAM,EAC5D,aACG;CACP,IAAI,EAAE,QAAQ,YAAY,OAAO;CACjC,IAAI,QAAQ,QAAQ,IAAI,IAAI;CAC5B,IAAI,CAAC,OAAO;EACV,MAAM,OAAO,UAAU;EACvB,QAAQ,KAAI,CAAE,CAAC,MAAM,WAAU;GAC7B,KAAK,iBAAiB,MAAM,OAAO,OAAO;EAC5C,CAAC;EACD,QAAQ,IAAI,MAAM,KAAK;CACzB;CACA,IAAI;EACF,MAAM;EACN,OAAO,KAAK,UAAU,MAAM;GAAE,UAAU;GAAM,gBAAgB;EAAI,CAAE,CAAC,CAAC;CACxE,QAAQ;EACN,QAAQ,OAAO,IAAI;EACnB,OAAO;CACT;AACF"}

package/fesm2022/hyalo-angular-code-block.mjs

@@ -0,0 +1,161 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, afterNextRender, computed, effect, inject, input, signal } from "@angular/core";
+import { HyCopy } from "@hyalo/angular/copy";
+var HyCodeBlock = class HyCodeBlock {
+	code = input.required(...ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []);
+	language = input("text", ...ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []);
+	label = input("Code sample", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	copyable = input(true, ...ngDevMode ? [{ debugName: "copyable" }] : /* istanbul ignore next */ []);
+	samples = input([], ...ngDevMode ? [{ debugName: "samples" }] : /* istanbul ignore next */ []);
+	selected = signal(0, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.samples()[this.selected()] ?? {
+		code: this.code(),
+		language: this.language(),
+		label: this.label()
+	}, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	highlighted = signal(null, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroy = inject(DestroyRef);
+		let generation = 0;
+		afterNextRender(() => this.ready.set(true));
+		effect(() => {
+			const sample = this.active(), ready = this.ready(), current = ++generation;
+			this.highlighted.set(null);
+			if (!ready || sample.language === "text") return;
+			import("./hyalo-angular-code-block-highlight-B20d5C76.mjs").then((module) => module.highlight(sample.code, sample.language)).then((html) => {
+				if (!destroy.destroyed && current === generation) this.highlighted.set(html);
+			}).catch(() => {});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCodeBlock,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyCodeBlock,
+		isStandalone: true,
+		selector: "hy-code-block",
+		inputs: {
+			code: {
+				classPropertyName: "code",
+				publicName: "code",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			language: {
+				classPropertyName: "language",
+				publicName: "language",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			copyable: {
+				classPropertyName: "copyable",
+				publicName: "copyable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			samples: {
+				classPropertyName: "samples",
+				publicName: "samples",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<figure>\n  <figcaption>\n    <span\n      >{{ label() }} <small>{{ active().language }}</small></span\n    >\n    @if (copyable()) {\n      <hy-copy [text]=\"active().code\" [label]=\"'Copy ' + label()\" />\n    }\n  </figcaption>\n  @if (samples().length > 1) {\n    <div class=\"languages\" role=\"group\" aria-label=\"Code language\">\n      @for (sample of samples(); track $index) {\n        <button\n          type=\"button\"\n          [attr.aria-pressed]=\"selected() === $index\"\n          (click)=\"selected.set($index)\"\n        >\n          {{ sample.label }}\n        </button>\n      }\n    </div>\n  }\n  <pre\n    tabindex=\"0\"\n    [attr.aria-label]=\"active().label\"\n    dir=\"ltr\"\n  >@if (highlighted(); as html) {<code [innerHTML]=\"html\"></code>} @else {<code [textContent]=\"active().code\"></code>}</pre>\n</figure>\n",
+		styles: [":host{display:block;min-inline-size:0}figure{margin:0;border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-m);overflow:hidden;background:var(--hy-surface-2);color:var(--hy-ink)}figcaption{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1rem;border-block-end:1px solid var(--hy-line);font-size:.875rem}small{color:var(--hy-ink-3);margin-inline-start:.5rem}button{min-block-size:44px;padding:.5rem .75rem;background:var(--hy-surface-1);border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);color:inherit;font:inherit;cursor:pointer}pre{margin:0;max-block-size:32rem;overflow:auto;padding:1rem;font:.8125rem/1.7 var(--hy-font-mono);tab-size:2}pre:focus-visible{outline:2px solid var(--hy-primary);outline-offset:-3px}.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}.languages{display:flex;gap:.5rem;padding:.5rem 1rem}.languages [aria-pressed=true]{background:var(--hy-primary-wash)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: HyCopy,
+			selector: "hy-copy",
+			inputs: [
+				"text",
+				"label",
+				"copiedLabel",
+				"failedLabel"
+			],
+			outputs: ["completed"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCodeBlock,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-code-block",
+			imports: [HyCopy],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<figure>\n  <figcaption>\n    <span\n      >{{ label() }} <small>{{ active().language }}</small></span\n    >\n    @if (copyable()) {\n      <hy-copy [text]=\"active().code\" [label]=\"'Copy ' + label()\" />\n    }\n  </figcaption>\n  @if (samples().length > 1) {\n    <div class=\"languages\" role=\"group\" aria-label=\"Code language\">\n      @for (sample of samples(); track $index) {\n        <button\n          type=\"button\"\n          [attr.aria-pressed]=\"selected() === $index\"\n          (click)=\"selected.set($index)\"\n        >\n          {{ sample.label }}\n        </button>\n      }\n    </div>\n  }\n  <pre\n    tabindex=\"0\"\n    [attr.aria-label]=\"active().label\"\n    dir=\"ltr\"\n  >@if (highlighted(); as html) {<code [innerHTML]=\"html\"></code>} @else {<code [textContent]=\"active().code\"></code>}</pre>\n</figure>\n",
+			styles: [":host{display:block;min-inline-size:0}figure{margin:0;border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-m);overflow:hidden;background:var(--hy-surface-2);color:var(--hy-ink)}figcaption{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1rem;border-block-end:1px solid var(--hy-line);font-size:.875rem}small{color:var(--hy-ink-3);margin-inline-start:.5rem}button{min-block-size:44px;padding:.5rem .75rem;background:var(--hy-surface-1);border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);color:inherit;font:inherit;cursor:pointer}pre{margin:0;max-block-size:32rem;overflow:auto;padding:1rem;font:.8125rem/1.7 var(--hy-font-mono);tab-size:2}pre:focus-visible{outline:2px solid var(--hy-primary);outline-offset:-3px}.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}.languages{display:flex;gap:.5rem;padding:.5rem 1rem}.languages [aria-pressed=true]{background:var(--hy-primary-wash)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		code: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "code",
+				required: true
+			}]
+		}],
+		language: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "language",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		copyable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copyable",
+				required: false
+			}]
+		}],
+		samples: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "samples",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyCodeBlock };
+
+//# sourceMappingURL=hyalo-angular-code-block.mjs.map

package/fesm2022/hyalo-angular-code-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-code-block.mjs","names":[],"sources":["../../../projects/hyalo/code-block/code-block.ts","../../../projects/hyalo/code-block/code-block.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  afterNextRender,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { HyCopy } from '@hyalo/angular/copy';\r\nexport interface HyCodeSample {\r\n  readonly code: string;\r\n  readonly language: string;\r\n  readonly label: string;\r\n}\r\n@Component({\r\n  selector: 'hy-code-block',\r\n  imports: [HyCopy],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './code-block.html',\r\n  styleUrl: './code-block.css',\r\n})\r\nexport class HyCodeBlock {\r\n  readonly code = input.required<string>();\r\n  readonly language = input('text');\r\n  readonly label = input('Code sample');\r\n  readonly copyable = input(true);\r\n  readonly samples = input<readonly HyCodeSample[]>([]);\r\n  protected readonly selected = signal(0);\r\n  protected readonly active = computed(\r\n    () =>\r\n      this.samples()[this.selected()] ?? {\r\n        code: this.code(),\r\n        language: this.language(),\r\n        label: this.label(),\r\n      },\r\n  );\r\n  protected readonly highlighted = signal<string | null>(null);\r\n  private readonly ready = signal(false);\r\n  constructor() {\r\n    const destroy = inject(DestroyRef);\r\n    let generation = 0;\r\n    afterNextRender(() => this.ready.set(true));\r\n    effect(() => {\r\n      const sample = this.active(),\r\n        ready = this.ready(),\r\n        current = ++generation;\r\n      this.highlighted.set(null);\r\n      if (!ready || sample.language === 'text') return;\r\n      void import('./highlight')\r\n        .then((module) => module.highlight(sample.code, sample.language))\r\n        .then((html) => {\r\n          if (!destroy.destroyed && current === generation) this.highlighted.set(html);\r\n        })\r\n        .catch(() => {\r\n          /* Plain source remains usable when the optional highlighter is unavailable. */\r\n        });\r\n    });\r\n  }\r\n}\r\n","<figure>\n  <figcaption>\n    <span\n      >{{ label() }} <small>{{ active().language }}</small></span\n    >\n    @if (copyable()) {\n      <hy-copy [text]=\"active().code\" [label]=\"'Copy ' + label()\" />\n    }\n  </figcaption>\n  @if (samples().length > 1) {\n    <div class=\"languages\" role=\"group\" aria-label=\"Code language\">\n      @for (sample of samples(); track $index) {\n        <button\n          type=\"button\"\n          [attr.aria-pressed]=\"selected() === $index\"\n          (click)=\"selected.set($index)\"\n        >\n          {{ sample.label }}\n        </button>\n      }\n    </div>\n  }\n  <pre\n    tabindex=\"0\"\n    [attr.aria-label]=\"active().label\"\n    dir=\"ltr\"\n  >@if (highlighted(); as html) {<code [innerHTML]=\"html\"></code>} @else {<code [textContent]=\"active().code\"></code>}</pre>\n</figure>\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-command.mjs

@@ -0,0 +1,193 @@
+import { Combobox, ComboboxPopup, ComboboxWidget } from "@angular/aria/combobox";
+import { Listbox, Option } from "@angular/aria/listbox";
+import { injectId, normalizeSearch } from "@hyalo/angular/core";
+import { DIALOG_DATA, Dialog, DialogRef } from "@angular/cdk/dialog";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, computed, inject, signal } from "@angular/core";
+var HyCommandPanel = class HyCommandPanel {
+	data = inject(DIALOG_DATA);
+	ref = inject(DialogRef);
+	id = injectId("command");
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	indexed = this.data.items.map((item) => ({
+		item,
+		text: normalizeSearch([
+			item.label,
+			item.description,
+			...item.keywords ?? []
+		].join(" "))
+	}));
+	matches = computed(() => {
+		const words = normalizeSearch(this.query()).split(/\s+/).filter(Boolean);
+		return this.indexed.filter((entry) => words.every((word) => entry.text.includes(word))).map((entry) => entry.item);
+	}, ...ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []);
+	results = computed(() => this.matches().slice(0, 50), ...ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []);
+	selected = signal([], ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	pick(values) {
+		const item = values[values.length - 1];
+		if (item && !item.disabled) this.ref.close(item);
+	}
+	search(event) {
+		this.query.set(event.target.value);
+	}
+	choose(item) {
+		if (!item.disabled) this.ref.close(item);
+	}
+	dismiss(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.close();
+	}
+	close() {
+		this.ref.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCommandPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyCommandPanel,
+		isStandalone: true,
+		selector: "hy-command-panel",
+		ngImport: i0,
+		template: "<div class=\"search\">\n  <input\n    ngCombobox\n    #combobox=\"ngCombobox\"\n    type=\"search\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [alwaysExpanded]=\"true\"\n    (keydown.escape)=\"dismiss($event)\"\n    [attr.aria-label]=\"data.label ?? 'Command search'\"\n    [placeholder]=\"data.placeholder ?? 'Search pages and actions'\"\n    [value]=\"query()\"\n    (input)=\"search($event)\"\n  />\n  <button type=\"button\" aria-label=\"Close command palette\" (click)=\"close()\">Esc</button>\n</div>\n<ng-template ngComboboxPopup [combobox]=\"combobox\">\n  <ul\n    ngComboboxWidget\n    ngListbox\n    #listbox=\"ngListbox\"\n    focusMode=\"activedescendant\"\n    selectionMode=\"explicit\"\n    [activeDescendant]=\"listbox.activeDescendant()\"\n    [value]=\"selected()\"\n    (valueChange)=\"pick($event)\"\n    [attr.aria-label]=\"data.label ?? 'Commands'\"\n  >\n    @for (item of results(); track item.id) {\n      <li ngOption [value]=\"item\" [label]=\"item.label\" [disabled]=\"!!item.disabled\">\n        <span>\n          @if (item.group) {\n            <small>{{ item.group }}</small>\n          }\n          <strong>{{ item.label }}</strong>\n          @if (item.description) {\n            <span class=\"description\">{{ item.description }}</span>\n          }\n        </span>\n        @if (item.shortcut) {\n          <kbd>{{ item.shortcut }}</kbd>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n<div class=\"status\" role=\"status\">\n  @if (!results().length) {\n    {{ data.emptyLabel ?? 'No matching commands' }}\n  } @else {\n    {{ matches().length }} results\n    @if (matches().length > 50) {\n      · showing the first 50\n    }\n  }\n</div>\n",
+		styles: [":host{display:block;overflow:hidden;border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-l);background:var(--hy-surface-1);color:var(--hy-ink);box-shadow:var(--hy-glass-shadow-thick)}.search{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-block-end:1px solid var(--hy-line);border-start-start-radius:inherit;border-start-end-radius:inherit}.search:focus-within{outline:2px solid var(--hy-primary);outline-offset:-3px}input{flex:1;min-inline-size:0;min-block-size:44px;background:transparent;border:0;color:inherit;font:inherit;outline:none}button{font:.75rem var(--hy-font-mono);color:var(--hy-ink-2);border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);background:var(--hy-surface-2);min-inline-size:44px;min-block-size:44px;cursor:pointer}ul{list-style:none;margin:0;padding:.5rem;max-block-size:min(24rem,55dvh);overflow:auto;overscroll-behavior:contain}li{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-block-size:44px;padding:.75rem;border-radius:var(--hy-radius-s);cursor:pointer}li[aria-selected=true]{background:var(--hy-primary-wash)}li[aria-disabled=true]{opacity:.45;cursor:default}strong{font-size:.9375rem}small,.description{display:block;color:var(--hy-ink-2);font-size:.75rem}small{margin-block-end:.25rem}kbd{font:.75rem var(--hy-font-mono);color:var(--hy-ink-2)}.status{border-block-start:1px solid var(--hy-line);padding:.75rem 1rem;color:var(--hy-ink-2);font-size:.75rem}:is(button,a):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: Combobox,
+				selector: "[ngCombobox]",
+				inputs: [
+					"disabled",
+					"readonly",
+					"softDisabled",
+					"alwaysExpanded",
+					"tabindex",
+					"expanded",
+					"value",
+					"inlineSuggestion"
+				],
+				outputs: ["expandedChange", "valueChange"],
+				exportAs: ["ngCombobox"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxPopup,
+				selector: "ng-template[ngComboboxPopup]",
+				inputs: ["combobox", "popupType"],
+				exportAs: ["ngComboboxPopup"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxWidget,
+				selector: "[ngComboboxWidget]",
+				inputs: ["activeDescendant"],
+				exportAs: ["ngComboboxWidget"]
+			},
+			{
+				kind: "directive",
+				type: Listbox,
+				selector: "[ngListbox]",
+				inputs: [
+					"id",
+					"orientation",
+					"multi",
+					"wrap",
+					"softDisabled",
+					"focusMode",
+					"selectionMode",
+					"typeaheadDelay",
+					"disabled",
+					"readonly",
+					"tabindex",
+					"value"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["ngListbox"]
+			},
+			{
+				kind: "directive",
+				type: Option,
+				selector: "[ngOption]",
+				inputs: [
+					"id",
+					"value",
+					"disabled",
+					"label"
+				],
+				exportAs: ["ngOption"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCommandPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-command-panel",
+			imports: [
+				Combobox,
+				ComboboxPopup,
+				ComboboxWidget,
+				Listbox,
+				Option
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"search\">\n  <input\n    ngCombobox\n    #combobox=\"ngCombobox\"\n    type=\"search\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [alwaysExpanded]=\"true\"\n    (keydown.escape)=\"dismiss($event)\"\n    [attr.aria-label]=\"data.label ?? 'Command search'\"\n    [placeholder]=\"data.placeholder ?? 'Search pages and actions'\"\n    [value]=\"query()\"\n    (input)=\"search($event)\"\n  />\n  <button type=\"button\" aria-label=\"Close command palette\" (click)=\"close()\">Esc</button>\n</div>\n<ng-template ngComboboxPopup [combobox]=\"combobox\">\n  <ul\n    ngComboboxWidget\n    ngListbox\n    #listbox=\"ngListbox\"\n    focusMode=\"activedescendant\"\n    selectionMode=\"explicit\"\n    [activeDescendant]=\"listbox.activeDescendant()\"\n    [value]=\"selected()\"\n    (valueChange)=\"pick($event)\"\n    [attr.aria-label]=\"data.label ?? 'Commands'\"\n  >\n    @for (item of results(); track item.id) {\n      <li ngOption [value]=\"item\" [label]=\"item.label\" [disabled]=\"!!item.disabled\">\n        <span>\n          @if (item.group) {\n            <small>{{ item.group }}</small>\n          }\n          <strong>{{ item.label }}</strong>\n          @if (item.description) {\n            <span class=\"description\">{{ item.description }}</span>\n          }\n        </span>\n        @if (item.shortcut) {\n          <kbd>{{ item.shortcut }}</kbd>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n<div class=\"status\" role=\"status\">\n  @if (!results().length) {\n    {{ data.emptyLabel ?? 'No matching commands' }}\n  } @else {\n    {{ matches().length }} results\n    @if (matches().length > 50) {\n      · showing the first 50\n    }\n  }\n</div>\n",
+			styles: [":host{display:block;overflow:hidden;border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-l);background:var(--hy-surface-1);color:var(--hy-ink);box-shadow:var(--hy-glass-shadow-thick)}.search{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-block-end:1px solid var(--hy-line);border-start-start-radius:inherit;border-start-end-radius:inherit}.search:focus-within{outline:2px solid var(--hy-primary);outline-offset:-3px}input{flex:1;min-inline-size:0;min-block-size:44px;background:transparent;border:0;color:inherit;font:inherit;outline:none}button{font:.75rem var(--hy-font-mono);color:var(--hy-ink-2);border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);background:var(--hy-surface-2);min-inline-size:44px;min-block-size:44px;cursor:pointer}ul{list-style:none;margin:0;padding:.5rem;max-block-size:min(24rem,55dvh);overflow:auto;overscroll-behavior:contain}li{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-block-size:44px;padding:.75rem;border-radius:var(--hy-radius-s);cursor:pointer}li[aria-selected=true]{background:var(--hy-primary-wash)}li[aria-disabled=true]{opacity:.45;cursor:default}strong{font-size:.9375rem}small,.description{display:block;color:var(--hy-ink-2);font-size:.75rem}small{margin-block-end:.25rem}kbd{font:.75rem var(--hy-font-mono);color:var(--hy-ink-2)}.status{border-block-start:1px solid var(--hy-line);padding:.75rem 1rem;color:var(--hy-ink-2);font-size:.75rem}:is(button,a):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}\n"]
+		}]
+	}]
+});
+var HyCommand = class HyCommand {
+	dialog = inject(Dialog);
+	open(config) {
+		return this.dialog.open(HyCommandPanel, {
+			data: config,
+			ariaLabel: config.label ?? "Command palette",
+			autoFocus: "input",
+			restoreFocus: true,
+			width: "36rem",
+			maxWidth: "calc(100vw - 2rem)",
+			maxHeight: "calc(100dvh - 2rem)"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCommand,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCommand,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCommand,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+export { HyCommand, HyCommandPanel };
+
+//# sourceMappingURL=hyalo-angular-command.mjs.map

package/fesm2022/hyalo-angular-command.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-command.mjs","names":[],"sources":["../../../projects/hyalo/command/command.ts","../../../projects/hyalo/command/command.html"],"sourcesContent":["import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';\nimport { Listbox, Option } from '@angular/aria/listbox';\nimport { normalizeSearch } from '@hyalo/angular/core';\nimport { Dialog, DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Injectable,\n  computed,\n  inject,\n  signal,\n} from '@angular/core';\nimport { injectId } from '@hyalo/angular/core';\nexport interface HyCommandItem<T = unknown> {\n  readonly id: string;\n  readonly label: string;\n  readonly value: T;\n  readonly description?: string;\n  readonly keywords?: readonly string[];\n  readonly group?: string;\n  readonly shortcut?: string;\n  readonly disabled?: boolean;\n}\nexport interface HyCommandConfig<T = unknown> {\n  readonly items: readonly HyCommandItem<T>[];\n  readonly label?: string;\n  readonly placeholder?: string;\n  readonly emptyLabel?: string;\n}\n@Component({\n  selector: 'hy-command-panel',\n  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './command.html',\n  styleUrl: './command.css',\n})\nexport class HyCommandPanel {\n  protected readonly data = inject(DIALOG_DATA) as HyCommandConfig;\n  private readonly ref = inject<DialogRef<HyCommandItem>>(DialogRef);\n  protected readonly id = injectId('command');\n  protected readonly query = signal('');\n  private readonly indexed = this.data.items.map((item) => ({\n    item,\n    text: normalizeSearch([item.label, item.description, ...(item.keywords ?? [])].join(' ')),\n  }));\n  protected readonly matches = computed(() => {\n    const words = normalizeSearch(this.query()).split(/\\s+/).filter(Boolean);\n    return this.indexed\n      .filter((entry) => words.every((word) => entry.text.includes(word)))\n      .map((entry) => entry.item);\n  });\n  protected readonly results = computed(() => this.matches().slice(0, 50));\n  protected readonly selected = signal<HyCommandItem[]>([]);\n  protected pick(values: readonly HyCommandItem[]): void {\n    const item = values[values.length - 1];\n    if (item && !item.disabled) this.ref.close(item);\n  }\n  protected search(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n  }\n  protected choose(item: HyCommandItem): void {\n    if (!item.disabled) this.ref.close(item);\n  }\n  protected dismiss(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.close();\n  }\n  protected close(): void {\n    this.ref.close();\n  }\n}\n\n@Injectable({ providedIn: 'root' })\nexport class HyCommand {\n  private readonly dialog = inject(Dialog);\n  open<T>(config: HyCommandConfig<T>): DialogRef<HyCommandItem<T>> {\n    return this.dialog.open<HyCommandItem<T>>(HyCommandPanel, {\n      data: config,\n      ariaLabel: config.label ?? 'Command palette',\n      autoFocus: 'input',\n      restoreFocus: true,\n      width: '36rem',\n      maxWidth: 'calc(100vw - 2rem)',\n      maxHeight: 'calc(100dvh - 2rem)',\n    });\n  }\n}\n","<div class=\"search\">\n  <input\n    ngCombobox\n    #combobox=\"ngCombobox\"\n    type=\"search\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [alwaysExpanded]=\"true\"\n    (keydown.escape)=\"dismiss($event)\"\n    [attr.aria-label]=\"data.label ?? 'Command search'\"\n    [placeholder]=\"data.placeholder ?? 'Search pages and actions'\"\n    [value]=\"query()\"\n    (input)=\"search($event)\"\n  />\n  <button type=\"button\" aria-label=\"Close command palette\" (click)=\"close()\">Esc</button>\n</div>\n<ng-template ngComboboxPopup [combobox]=\"combobox\">\n  <ul\n    ngComboboxWidget\n    ngListbox\n    #listbox=\"ngListbox\"\n    focusMode=\"activedescendant\"\n    selectionMode=\"explicit\"\n    [activeDescendant]=\"listbox.activeDescendant()\"\n    [value]=\"selected()\"\n    (valueChange)=\"pick($event)\"\n    [attr.aria-label]=\"data.label ?? 'Commands'\"\n  >\n    @for (item of results(); track item.id) {\n      <li ngOption [value]=\"item\" [label]=\"item.label\" [disabled]=\"!!item.disabled\">\n        <span>\n          @if (item.group) {\n            <small>{{ item.group }}</small>\n          }\n          <strong>{{ item.label }}</strong>\n          @if (item.description) {\n            <span class=\"description\">{{ item.description }}</span>\n          }\n        </span>\n        @if (item.shortcut) {\n          <kbd>{{ item.shortcut }}</kbd>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n<div class=\"status\" role=\"status\">\n  @if (!results().length) {\n    {{ data.emptyLabel ?? 'No matching commands' }}\n  } @else {\n    {{ matches().length }} results\n    @if (matches().length > 50) {\n      · showing the first 50\n    }\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-copy.mjs

@@ -0,0 +1,138 @@
+import { Clipboard } from "@angular/cdk/clipboard";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, input, output, signal } from "@angular/core";
+var HyCopy = class HyCopy {
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	label = input("Copy", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	copiedLabel = input("Copied", ...ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []);
+	failedLabel = input("Copy failed. Select and copy the text.", ...ngDevMode ? [{ debugName: "failedLabel" }] : /* istanbul ignore next */ []);
+	completed = output();
+	status = signal("", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	clipboard = inject(Clipboard);
+	timer;
+	copied = computed(() => this.status() === this.copiedLabel(), ...ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+	}
+	copy() {
+		clearTimeout(this.timer);
+		const success = this.clipboard.copy(this.text());
+		this.status.set(success ? this.copiedLabel() : this.failedLabel());
+		this.completed.emit(success);
+		this.timer = setTimeout(() => this.status.set(""), 2e3);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCopy,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyCopy,
+		isStandalone: true,
+		selector: "hy-copy",
+		inputs: {
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			copiedLabel: {
+				classPropertyName: "copiedLabel",
+				publicName: "copiedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			failedLabel: {
+				classPropertyName: "failedLabel",
+				publicName: "failedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { completed: "completed" },
+		ngImport: i0,
+		template: `<button type="button" (click)="copy()" [attr.aria-label]="label()">
+      {{ copied() ? copiedLabel() : label() }}</button
+    ><span class="sr" role="status">{{ status() }}</span
+    ><ng-content />`,
+		isInline: true,
+		styles: [":host{display:inline-flex;align-items:center;gap:.5rem}button{min-block-size:44px;border:1px solid var(--hy-line);background:var(--hy-surface-1);color:var(--hy-ink);border-radius:var(--hy-radius-s);font:inherit;padding:.5rem .75rem;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}.sr{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCopy,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-copy",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<button type="button" (click)="copy()" [attr.aria-label]="label()">
+      {{ copied() ? copiedLabel() : label() }}</button
+    ><span class="sr" role="status">{{ status() }}</span
+    ><ng-content />`,
+			styles: [":host{display:inline-flex;align-items:center;gap:.5rem}button{min-block-size:44px;border:1px solid var(--hy-line);background:var(--hy-surface-1);color:var(--hy-ink);border-radius:var(--hy-radius-s);font:inherit;padding:.5rem .75rem;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}.sr{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		copiedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copiedLabel",
+				required: false
+			}]
+		}],
+		failedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "failedLabel",
+				required: false
+			}]
+		}],
+		completed: [{
+			type: i0.Output,
+			args: ["completed"]
+		}]
+	}
+});
+export { HyCopy };
+
+//# sourceMappingURL=hyalo-angular-copy.mjs.map

package/fesm2022/hyalo-angular-copy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-copy.mjs","names":[],"sources":["../../../projects/hyalo/copy/copy.ts"],"sourcesContent":["import { Clipboard } from '@angular/cdk/clipboard';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n@Component({\n  selector: 'hy-copy',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<button type=\"button\" (click)=\"copy()\" [attr.aria-label]=\"label()\">\n      {{ copied() ? copiedLabel() : label() }}</button\n    ><span class=\"sr\" role=\"status\">{{ status() }}</span\n    ><ng-content />`,\n  styleUrl: './copy.css',\n})\nexport class HyCopy {\n  readonly text = input.required<string>();\n  readonly label = input('Copy');\n  readonly copiedLabel = input('Copied');\n  readonly failedLabel = input('Copy failed. Select and copy the text.');\n  readonly completed = output<boolean>();\n  protected readonly status = signal('');\n  private readonly clipboard = inject(Clipboard);\n  private timer?: ReturnType<typeof setTimeout>;\n  protected readonly copied = computed(() => this.status() === this.copiedLabel());\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n  }\n  copy(): void {\n    clearTimeout(this.timer);\n    const success = this.clipboard.copy(this.text());\n    this.status.set(success ? this.copiedLabel() : this.failedLabel());\n    this.completed.emit(success);\n    this.timer = setTimeout(() => this.status.set(''), 2000);\n  }\n}\n"],"mappings":";;;AAoBA,IAAa,SAAb,MAAa,OAAM;CACR,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,QAAQ,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,cAAc,MAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,cAAc,MAAM,0CAAyC,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC7D,YAAY,OAAM;CACR,SAAS,OAAO,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,YAAY,OAAO,SAAS;CACrC;CACW,SAAS,eAAe,KAAK,OAAM,MAAO,KAAK,YAAW,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAChF,cAAA;EACE,OAAO,UAAU,CAAC,CAAC,gBAAgB,aAAa,KAAK,KAAK,CAAC;CAC7D;CACA,OAAI;EACF,aAAa,KAAK,KAAK;EACvB,MAAM,UAAU,KAAK,UAAU,KAAK,KAAK,KAAI,CAAE;EAC/C,KAAK,OAAO,IAAI,UAAU,KAAK,YAAW,IAAK,KAAK,YAAW,CAAE;EACjE,KAAK,UAAU,KAAK,OAAO;EAC3B,KAAK,QAAQ,iBAAiB,KAAK,OAAO,IAAI,EAAE,GAAG,GAAI;CACzD;CAnBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UANP;;;;EAGQ,UAAA;EAAA,QAAA,CAAA,iaAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAGP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EATlB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,iBACF,wBAAwB;GAAM,UACrC;;;;GAGQ,QAAA,CAAA,iaAAA;EAAA,CAAA"}