@hyalo/angular 0.1.0 → 0.3.1

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"}