@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-filter.mjs

@@ -0,0 +1,309 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { HyField, HyInput } from "@hyalo/angular/field";
+import { HySelect } from "@hyalo/angular/select";
+function encodeFilters(clauses) {
+	return JSON.stringify({
+		version: 1,
+		clauses
+	});
+}
+function decodeFilters(text, codec) {
+	const payload = JSON.parse(text);
+	if (!payload || typeof payload !== "object" || !("version" in payload) || payload.version !== 1 || !("clauses" in payload) || !Array.isArray(payload.clauses)) throw new Error("Unsupported filter state");
+	const ids = /* @__PURE__ */ new Set();
+	return payload.clauses.map((value) => {
+		if (!isFilterToken(value) || !codec.accepts(value) || ids.has(value.id)) throw new Error("Invalid or unsupported filter clause");
+		ids.add(value.id);
+		return value;
+	});
+}
+function isFilterToken(value) {
+	if (!value || typeof value !== "object" || !("id" in value) || typeof value.id !== "string" || !value.id || !("field" in value) || typeof value.field !== "string" || !value.field || !("operator" in value) || !("value" in value)) return false;
+	const data = value.value;
+	const scalar = (v) => typeof v === "string" || typeof v === "boolean" || typeof v === "number" && Number.isFinite(v);
+	if (value.operator === "eq") return scalar(data);
+	if (value.operator === "contains") return typeof data === "string";
+	if (value.operator === "in") return Array.isArray(data) && data.every(scalar);
+	if (value.operator !== "between") return false;
+	if (Array.isArray(data)) return data.length === 2 && data.every((v) => typeof v === "number" && Number.isFinite(v)) && data[0] <= data[1];
+	if (!data || typeof data !== "object" || !("timeZone" in data) || typeof data.timeZone !== "string" || !("kind" in data)) return false;
+	try {
+		new Intl.DateTimeFormat("en", { timeZone: data.timeZone });
+	} catch {
+		return false;
+	}
+	if (data.kind === "preset") return "preset" in data && [
+		"24H",
+		"7D",
+		"30D",
+		"1Y"
+	].includes(String(data.preset));
+	const instant = (v) => typeof v === "string" && /^\d{4}-\d{2}-\d{2}T.*(?:Z|[+-]\d{2}:\d{2})$/.test(v) && Number.isFinite(Date.parse(v));
+	return data.kind === "absolute" && "start" in data && "end" in data && instant(data.start) && instant(data.end) && Date.parse(data.start) < Date.parse(data.end);
+}
+function resolveDateRange(value, now) {
+	if (!isFilterToken({
+		id: "range",
+		field: "time",
+		operator: "between",
+		value
+	}) || !Number.isFinite(now.getTime())) throw new Error("Invalid date range");
+	if (value.kind === "absolute") return {
+		start: value.start,
+		end: value.end
+	};
+	const hours = {
+		"24H": 24,
+		"7D": 168,
+		"30D": 720,
+		"1Y": 8760
+	}[value.preset];
+	return {
+		start: (/* @__PURE__ */ new Date(now.getTime() - hours * 36e5)).toISOString(),
+		end: now.toISOString()
+	};
+}
+var HyFilterBar = class HyFilterBar {
+	fields = input.required(...ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []);
+	clauses = model([], ...ngDevMode ? [{ debugName: "clauses" }] : /* istanbul ignore next */ []);
+	label = input("Filter results", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	clearLabel = input("Clear filters", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	removeLabel = input("Remove", ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	anyLabel = input("Any", ...ngDevMode ? [{ debugName: "anyLabel" }] : /* istanbul ignore next */ []);
+	activeLabel = input("Active filters", ...ngDevMode ? [{ debugName: "activeLabel" }] : /* istanbul ignore next */ []);
+	view = computed(() => this.clauses().map((clause) => {
+		const field = this.fields().find((entry) => entry.field === clause.field);
+		return {
+			clause,
+			label: field?.label ?? clause.field,
+			text: field?.format?.(clause) ?? (typeof clause.value === "object" ? JSON.stringify(clause.value) : String(clause.value)),
+			editor: field?.editor,
+			context: {
+				$implicit: clause,
+				update: (next) => this.update(next)
+			}
+		};
+	}), ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	raw(field) {
+		const value = this.clauses().find((clause) => clause.field === field)?.value;
+		if (typeof value === "object" && value && !Array.isArray(value) && "kind" in value && value.kind === "preset" && "preset" in value) return String(value.preset);
+		return typeof value === "string" ? value : "";
+	}
+	change(field, raw) {
+		const existing = this.clauses().find((clause) => clause.field === field.field);
+		const next = raw ? field.create(existing?.id ?? `filter-${field.field}`, raw) : null;
+		this.clauses.set([...this.clauses().filter((clause) => clause.field !== field.field), ...next ? [next] : []]);
+	}
+	remove(id) {
+		this.clauses.update((items) => items.filter((item) => item.id !== id));
+	}
+	update(next) {
+		this.clauses.update((items) => items.map((item) => item.id === next.id ? next : item));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyFilterBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyFilterBar,
+		isStandalone: true,
+		selector: "hy-filter-bar",
+		inputs: {
+			fields: {
+				classPropertyName: "fields",
+				publicName: "fields",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			clauses: {
+				classPropertyName: "clauses",
+				publicName: "clauses",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			anyLabel: {
+				classPropertyName: "anyLabel",
+				publicName: "anyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeLabel: {
+				classPropertyName: "activeLabel",
+				publicName: "activeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { clauses: "clausesChange" },
+		ngImport: i0,
+		template: "<div class=\"editors\" role=\"group\" [attr.aria-label]=\"label()\">\n  @for (field of fields(); track field.field) {\n    <hy-field class=\"field\" [label]=\"field.label\">\n      @if (field.options; as options) {\n        <hy-select\n          [options]=\"options\"\n          [native]=\"true\"\n          [value]=\"raw(field.field)\"\n          (valueChange)=\"change(field, $event ?? '')\"\n          [placeholder]=\"anyLabel()\"\n        />\n      } @else {\n        <input\n          hyInput\n          type=\"search\"\n          [attr.aria-label]=\"field.label\"\n          [value]=\"raw(field.field)\"\n          (input)=\"change(field, $any($event.target).value)\"\n        />\n      }\n    </hy-field>\n  }\n  @if (clauses().length) {\n    <button type=\"button\" (click)=\"clauses.set([])\">{{ clearLabel() }}</button>\n  }\n  <ng-content />\n</div>\n<div class=\"tokens\" role=\"list\" [attr.aria-label]=\"activeLabel()\">\n  @for (item of view(); track item.clause.id) {\n    <span role=\"listitem\">\n      @if (item.editor; as editor) {\n        <ng-container [ngTemplateOutlet]=\"editor\" [ngTemplateOutletContext]=\"item.context\" />\n      } @else {\n        <span>{{ item.label }}: {{ item.text }}</span>\n      }\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"removeLabel() + ' ' + item.label\"\n        (click)=\"remove(item.clause.id)\"\n      >\n        ×\n      </button>\n    </span>\n  }\n</div>\n",
+		styles: [":host{display:block}.editors,.tokens{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem}.tokens{margin-block-start:.75rem}.field{display:grid;gap:.25rem;font-size:.875rem;min-inline-size:min(12rem,100%);flex:1 1 12rem}button{min-block-size:44px;border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);background:var(--hy-surface-1);color:var(--hy-ink);font:inherit;padding:.5rem .75rem}.tokens>span{display:inline-flex;align-items:center;gap:.5rem;background:var(--hy-surface-2);border-radius:var(--hy-radius-s);padding-inline-start:.75rem}button{cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: HySelect,
+				selector: "hy-select",
+				inputs: [
+					"options",
+					"value",
+					"placeholder",
+					"name",
+					"optionTemplate",
+					"disabled",
+					"required",
+					"invalid",
+					"errors",
+					"touched",
+					"native"
+				],
+				outputs: ["valueChange", "touch"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: HyField,
+				selector: "hy-field",
+				inputs: [
+					"label",
+					"hint",
+					"error",
+					"forceError",
+					"size"
+				]
+			},
+			{
+				kind: "directive",
+				type: HyInput,
+				selector: "input[hyInput], textarea[hyInput]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyFilterBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-filter-bar",
+			imports: [
+				HySelect,
+				NgTemplateOutlet,
+				HyField,
+				HyInput
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"editors\" role=\"group\" [attr.aria-label]=\"label()\">\n  @for (field of fields(); track field.field) {\n    <hy-field class=\"field\" [label]=\"field.label\">\n      @if (field.options; as options) {\n        <hy-select\n          [options]=\"options\"\n          [native]=\"true\"\n          [value]=\"raw(field.field)\"\n          (valueChange)=\"change(field, $event ?? '')\"\n          [placeholder]=\"anyLabel()\"\n        />\n      } @else {\n        <input\n          hyInput\n          type=\"search\"\n          [attr.aria-label]=\"field.label\"\n          [value]=\"raw(field.field)\"\n          (input)=\"change(field, $any($event.target).value)\"\n        />\n      }\n    </hy-field>\n  }\n  @if (clauses().length) {\n    <button type=\"button\" (click)=\"clauses.set([])\">{{ clearLabel() }}</button>\n  }\n  <ng-content />\n</div>\n<div class=\"tokens\" role=\"list\" [attr.aria-label]=\"activeLabel()\">\n  @for (item of view(); track item.clause.id) {\n    <span role=\"listitem\">\n      @if (item.editor; as editor) {\n        <ng-container [ngTemplateOutlet]=\"editor\" [ngTemplateOutletContext]=\"item.context\" />\n      } @else {\n        <span>{{ item.label }}: {{ item.text }}</span>\n      }\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"removeLabel() + ' ' + item.label\"\n        (click)=\"remove(item.clause.id)\"\n      >\n        ×\n      </button>\n    </span>\n  }\n</div>\n",
+			styles: [":host{display:block}.editors,.tokens{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem}.tokens{margin-block-start:.75rem}.field{display:grid;gap:.25rem;font-size:.875rem;min-inline-size:min(12rem,100%);flex:1 1 12rem}button{min-block-size:44px;border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);background:var(--hy-surface-1);color:var(--hy-ink);font:inherit;padding:.5rem .75rem}.tokens>span{display:inline-flex;align-items:center;gap:.5rem;background:var(--hy-surface-2);border-radius:var(--hy-radius-s);padding-inline-start:.75rem}button{cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"]
+		}]
+	}],
+	propDecorators: {
+		fields: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fields",
+				required: true
+			}]
+		}],
+		clauses: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clauses",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["clausesChange"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		anyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "anyLabel",
+				required: false
+			}]
+		}],
+		activeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyFilterBar, decodeFilters, encodeFilters, isFilterToken, resolveDateRange };
+
+//# sourceMappingURL=hyalo-angular-filter.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-filter.mjs","names":[],"sources":["../../../projects/hyalo/filter/state.ts","../../../projects/hyalo/filter/filter.ts","../../../projects/hyalo/filter/filter-bar.html"],"sourcesContent":["export type HyFilterScalar = string | number | boolean;\nexport type HyDatePreset = '24H' | '7D' | '30D' | '1Y';\nexport type HyDateRangeValue =\n  | { readonly kind: 'preset'; readonly preset: HyDatePreset; readonly timeZone: string }\n  | {\n      readonly kind: 'absolute';\n      readonly start: string;\n      readonly end: string;\n      readonly timeZone: string;\n    };\nexport type HyFilterRule =\n  | { readonly operator: 'eq'; readonly value: HyFilterScalar }\n  | { readonly operator: 'in'; readonly value: readonly HyFilterScalar[] }\n  | { readonly operator: 'contains'; readonly value: string }\n  | { readonly operator: 'between'; readonly value: readonly [number, number] | HyDateRangeValue };\nexport type HyFilterClause<S> = {\n  [K in keyof S]: { readonly id: string; readonly field: K } & S[K];\n}[keyof S];\nexport type HyFilterToken = { readonly id: string; readonly field: string } & HyFilterRule;\nexport interface HyFilterCodec<C extends HyFilterToken> {\n  readonly accepts: (value: unknown) => value is C;\n}\nexport function encodeFilters<C extends HyFilterToken>(clauses: readonly C[]): string {\n  return JSON.stringify({ version: 1, clauses });\n}\nexport function decodeFilters<C extends HyFilterToken>(\n  text: string,\n  codec: HyFilterCodec<C>,\n): readonly C[] {\n  const payload: unknown = JSON.parse(text);\n  if (\n    !payload ||\n    typeof payload !== 'object' ||\n    !('version' in payload) ||\n    payload.version !== 1 ||\n    !('clauses' in payload) ||\n    !Array.isArray(payload.clauses)\n  )\n    throw new Error('Unsupported filter state');\n  const ids = new Set<string>();\n  return payload.clauses.map((value: unknown) => {\n    if (!isFilterToken(value) || !codec.accepts(value) || ids.has(value.id))\n      throw new Error('Invalid or unsupported filter clause');\n    ids.add(value.id);\n    return value;\n  });\n}\nexport function isFilterToken(value: unknown): value is HyFilterToken {\n  if (\n    !value ||\n    typeof value !== 'object' ||\n    !('id' in value) ||\n    typeof value.id !== 'string' ||\n    !value.id ||\n    !('field' in value) ||\n    typeof value.field !== 'string' ||\n    !value.field ||\n    !('operator' in value) ||\n    !('value' in value)\n  )\n    return false;\n  const data = value.value;\n  const scalar = (v: unknown): v is HyFilterScalar =>\n    typeof v === 'string' ||\n    typeof v === 'boolean' ||\n    (typeof v === 'number' && Number.isFinite(v));\n  if (value.operator === 'eq') return scalar(data);\n  if (value.operator === 'contains') return typeof data === 'string';\n  if (value.operator === 'in') return Array.isArray(data) && data.every(scalar);\n  if (value.operator !== 'between') return false;\n  if (Array.isArray(data))\n    return (\n      data.length === 2 &&\n      data.every((v) => typeof v === 'number' && Number.isFinite(v)) &&\n      data[0] <= data[1]\n    );\n  if (\n    !data ||\n    typeof data !== 'object' ||\n    !('timeZone' in data) ||\n    typeof data.timeZone !== 'string' ||\n    !('kind' in data)\n  )\n    return false;\n  try {\n    new Intl.DateTimeFormat('en', { timeZone: data.timeZone });\n  } catch {\n    return false;\n  }\n  if (data.kind === 'preset')\n    return 'preset' in data && ['24H', '7D', '30D', '1Y'].includes(String(data.preset));\n  const instant = (v: unknown): v is string =>\n    typeof v === 'string' &&\n    /^\\d{4}-\\d{2}-\\d{2}T.*(?:Z|[+-]\\d{2}:\\d{2})$/.test(v) &&\n    Number.isFinite(Date.parse(v));\n  return (\n    data.kind === 'absolute' &&\n    'start' in data &&\n    'end' in data &&\n    instant(data.start) &&\n    instant(data.end) &&\n    Date.parse(data.start) < Date.parse(data.end)\n  );\n}\n\n/** Presets are rolling elapsed intervals; both editors use start-inclusive/end-exclusive instants. */\nexport function resolveDateRange(\n  value: HyDateRangeValue,\n  now: Date,\n): { readonly start: string; readonly end: string } {\n  if (\n    !isFilterToken({ id: 'range', field: 'time', operator: 'between', value }) ||\n    !Number.isFinite(now.getTime())\n  )\n    throw new Error('Invalid date range');\n  if (value.kind === 'absolute') return { start: value.start, end: value.end };\n  const hours = { '24H': 24, '7D': 168, '30D': 720, '1Y': 8760 }[value.preset];\n  return { start: new Date(now.getTime() - hours * 3600000).toISOString(), end: now.toISOString() };\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  TemplateRef,\n  computed,\n  input,\n  model,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { HyField, HyInput } from '@hyalo/angular/field';\nimport { HySelect } from '@hyalo/angular/select';\nimport { type HySelectOption } from '@hyalo/angular/select';\nimport { type HyFilterToken } from './state';\nexport interface HyFilterEditorContext<C> {\n  readonly $implicit: C;\n  readonly update: (clause: C) => void;\n}\nexport interface HyFilterField<C extends HyFilterToken> {\n  readonly field: C['field'];\n  readonly label: string;\n  readonly options?: readonly HySelectOption<string>[];\n  readonly create: (id: string, value: string) => C | null;\n  readonly editor?: TemplateRef<HyFilterEditorContext<C>>;\n  readonly format?: (clause: C) => string;\n}\n@Component({\n  selector: 'hy-filter-bar',\n  imports: [HySelect, NgTemplateOutlet, HyField, HyInput],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './filter-bar.html',\n  styleUrl: './filter-bar.css',\n})\nexport class HyFilterBar<C extends HyFilterToken> {\n  readonly fields = input.required<readonly HyFilterField<C>[]>();\n  readonly clauses = model<readonly C[]>([]);\n  readonly label = input('Filter results');\n  readonly clearLabel = input('Clear filters');\n  readonly removeLabel = input('Remove');\n  readonly anyLabel = input('Any');\n  readonly activeLabel = input('Active filters');\n  protected readonly view = computed(() =>\n    this.clauses().map((clause) => {\n      const field = this.fields().find((entry) => entry.field === clause.field);\n      return {\n        clause,\n        label: field?.label ?? clause.field,\n        text:\n          field?.format?.(clause) ??\n          (typeof clause.value === 'object' ? JSON.stringify(clause.value) : String(clause.value)),\n        editor: field?.editor,\n        context: { $implicit: clause, update: (next: C) => this.update(next) },\n      };\n    }),\n  );\n  protected raw(field: string): string {\n    const value = this.clauses().find((clause) => clause.field === field)?.value;\n    if (\n      typeof value === 'object' &&\n      value &&\n      !Array.isArray(value) &&\n      'kind' in value &&\n      value.kind === 'preset' &&\n      'preset' in value\n    )\n      return String(value.preset);\n    return typeof value === 'string' ? value : '';\n  }\n  protected change(field: HyFilterField<C>, raw: string): void {\n    const existing = this.clauses().find((clause) => clause.field === field.field);\n    const next = raw ? field.create(existing?.id ?? `filter-${field.field}`, raw) : null;\n    this.clauses.set([\n      ...this.clauses().filter((clause) => clause.field !== field.field),\n      ...(next ? [next] : []),\n    ]);\n  }\n  protected remove(id: string): void {\n    this.clauses.update((items) => items.filter((item) => item.id !== id));\n  }\n  private update(next: C): void {\n    this.clauses.update((items) => items.map((item) => (item.id === next.id ? next : item)));\n  }\n}\n","<div class=\"editors\" role=\"group\" [attr.aria-label]=\"label()\">\n  @for (field of fields(); track field.field) {\n    <hy-field class=\"field\" [label]=\"field.label\">\n      @if (field.options; as options) {\n        <hy-select\n          [options]=\"options\"\n          [native]=\"true\"\n          [value]=\"raw(field.field)\"\n          (valueChange)=\"change(field, $event ?? '')\"\n          [placeholder]=\"anyLabel()\"\n        />\n      } @else {\n        <input\n          hyInput\n          type=\"search\"\n          [attr.aria-label]=\"field.label\"\n          [value]=\"raw(field.field)\"\n          (input)=\"change(field, $any($event.target).value)\"\n        />\n      }\n    </hy-field>\n  }\n  @if (clauses().length) {\n    <button type=\"button\" (click)=\"clauses.set([])\">{{ clearLabel() }}</button>\n  }\n  <ng-content />\n</div>\n<div class=\"tokens\" role=\"list\" [attr.aria-label]=\"activeLabel()\">\n  @for (item of view(); track item.clause.id) {\n    <span role=\"listitem\">\n      @if (item.editor; as editor) {\n        <ng-container [ngTemplateOutlet]=\"editor\" [ngTemplateOutletContext]=\"item.context\" />\n      } @else {\n        <span>{{ item.label }}: {{ item.text }}</span>\n      }\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"removeLabel() + ' ' + item.label\"\n        (click)=\"remove(item.clause.id)\"\n      >\n        ×\n      </button>\n    </span>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-hotspot.mjs

@@ -0,0 +1,225 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output } from "@angular/core";
+import { HyMotion } from "@hyalo/angular/motion";
+import { HyPopover } from "@hyalo/angular/popover";
+var HyHotspot = class HyHotspot {
+	motion = inject(HyMotion);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	position = input.required(...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	mode = input("label", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	placement = input("top", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close details", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	activated = output();
+	visible = computed(() => this.position().visible !== false && Number.isFinite(this.position().x) && Number.isFinite(this.position().y), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyHotspot,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyHotspot,
+		isStandalone: true,
+		selector: "hy-hotspot",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			open: "openChange",
+			activated: "activated"
+		},
+		host: { properties: {
+			"style.inset-inline-start.%": "position().x",
+			"style.inset-block-start.%": "position().y",
+			"hidden": "!visible()",
+			"attr.data-mode": "mode()",
+			"attr.data-open": "open()",
+			"attr.data-motion": "motion.enabled()",
+			"style.--hy-hotspot-duration": "motion.enabled() ? \"var(--hy-dur-quick)\" : \"0ms\""
+		} },
+		ngImport: i0,
+		template: "@if (description()) {\r\n  <button\r\n    #popover=\"hyPopover\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [hyPopover]=\"details\"\r\n    [popoverLabel]=\"label()\"\r\n    popoverMaterial=\"solid\"\r\n    [popoverPlacement]=\"placement()\"\r\n    [(popoverOpen)]=\"open\"\r\n    (click)=\"activated.emit()\"\r\n  >\r\n    <span class=\"dot\" aria-hidden=\"true\"></span><span class=\"label\">{{ label() }}</span>\r\n  </button>\r\n  <ng-template #details>\r\n    <div class=\"details\">\r\n      <strong>{{ label() }}</strong>\r\n      <p>{{ description() }}</p>\r\n      <button class=\"close\" type=\"button\" (click)=\"popover.close()\">{{ closeLabel() }}</button>\r\n    </div>\r\n  </ng-template>\r\n} @else {\r\n  <button\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"label()\"\r\n    (click)=\"activated.emit()\"\r\n  >\r\n    <span class=\"dot\" aria-hidden=\"true\"></span><span class=\"label\">{{ label() }}</span>\r\n  </button>\r\n}\r\n",
+		styles: [":host{display:block;position:absolute;z-index:1;transform:translate(-50%,-50%)}:host([hidden]){display:none}button{display:flex;align-items:center;gap:var(--hy-space-2);min-block-size:2.75rem;padding:var(--hy-space-2) var(--hy-space-4);border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-pill);color:var(--hy-ink);background:var(--hy-surface-1);box-shadow:var(--hy-glass-shadow);font:inherit;cursor:pointer;transition:transform var(--hy-hotspot-duration) var(--hy-ease-out),border-color var(--hy-hotspot-duration) ease}button[aria-expanded=true]{border-color:var(--hy-primary)}:host([data-motion=\"true\"]) button:active:not(:disabled){transform:scale(.97)}@media(hover:hover)and (pointer:fine){:host([data-motion=\"true\"]) button:hover:not(:disabled){transform:translateY(-2px)}}:host([data-mode=\"pin\"]) button{inline-size:2.75rem;padding:0;justify-content:center}:host([data-mode=\"pin\"]) .label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}strong{display:block;color:var(--hy-ink)}.details{display:block;min-inline-size:12rem;max-inline-size:18rem}p{max-inline-size:28ch;margin-block:var(--hy-space-2) var(--hy-space-4);color:var(--hy-ink-2);line-height:var(--hy-leading)}.close{min-block-size:2rem;padding:var(--hy-space-1) var(--hy-space-3);border-radius:var(--hy-radius-s);box-shadow:none;background:var(--hy-primary-wash);color:var(--hy-primary)}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:4px}button:disabled{opacity:.6;cursor:default}.dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary)}:host:dir(rtl){transform:translate(50%,-50%)}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: HyPopover,
+			selector: "[hyPopover]",
+			inputs: [
+				"hyPopover",
+				"popoverLabel",
+				"popoverMaterial",
+				"popoverPlacement",
+				"popoverOpen"
+			],
+			outputs: ["popoverOpenChange"],
+			exportAs: ["hyPopover"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyHotspot,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-hotspot",
+			imports: [HyPopover],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.inset-inline-start.%]": "position().x",
+				"[style.inset-block-start.%]": "position().y",
+				"[hidden]": "!visible()",
+				"[attr.data-mode]": "mode()",
+				"[attr.data-open]": "open()",
+				"[attr.data-motion]": "motion.enabled()",
+				"[style.--hy-hotspot-duration]": "motion.enabled() ? \"var(--hy-dur-quick)\" : \"0ms\""
+			},
+			template: "@if (description()) {\r\n  <button\r\n    #popover=\"hyPopover\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [hyPopover]=\"details\"\r\n    [popoverLabel]=\"label()\"\r\n    popoverMaterial=\"solid\"\r\n    [popoverPlacement]=\"placement()\"\r\n    [(popoverOpen)]=\"open\"\r\n    (click)=\"activated.emit()\"\r\n  >\r\n    <span class=\"dot\" aria-hidden=\"true\"></span><span class=\"label\">{{ label() }}</span>\r\n  </button>\r\n  <ng-template #details>\r\n    <div class=\"details\">\r\n      <strong>{{ label() }}</strong>\r\n      <p>{{ description() }}</p>\r\n      <button class=\"close\" type=\"button\" (click)=\"popover.close()\">{{ closeLabel() }}</button>\r\n    </div>\r\n  </ng-template>\r\n} @else {\r\n  <button\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"label()\"\r\n    (click)=\"activated.emit()\"\r\n  >\r\n    <span class=\"dot\" aria-hidden=\"true\"></span><span class=\"label\">{{ label() }}</span>\r\n  </button>\r\n}\r\n",
+			styles: [":host{display:block;position:absolute;z-index:1;transform:translate(-50%,-50%)}:host([hidden]){display:none}button{display:flex;align-items:center;gap:var(--hy-space-2);min-block-size:2.75rem;padding:var(--hy-space-2) var(--hy-space-4);border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-pill);color:var(--hy-ink);background:var(--hy-surface-1);box-shadow:var(--hy-glass-shadow);font:inherit;cursor:pointer;transition:transform var(--hy-hotspot-duration) var(--hy-ease-out),border-color var(--hy-hotspot-duration) ease}button[aria-expanded=true]{border-color:var(--hy-primary)}:host([data-motion=\"true\"]) button:active:not(:disabled){transform:scale(.97)}@media(hover:hover)and (pointer:fine){:host([data-motion=\"true\"]) button:hover:not(:disabled){transform:translateY(-2px)}}:host([data-mode=\"pin\"]) button{inline-size:2.75rem;padding:0;justify-content:center}:host([data-mode=\"pin\"]) .label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}strong{display:block;color:var(--hy-ink)}.details{display:block;min-inline-size:12rem;max-inline-size:18rem}p{max-inline-size:28ch;margin-block:var(--hy-space-2) var(--hy-space-4);color:var(--hy-ink-2);line-height:var(--hy-leading)}.close{min-block-size:2rem;padding:var(--hy-space-1) var(--hy-space-3);border-radius:var(--hy-radius-s);box-shadow:none;background:var(--hy-primary-wash);color:var(--hy-primary)}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:4px}button:disabled{opacity:.6;cursor:default}.dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary)}:host:dir(rtl){transform:translate(50%,-50%)}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		activated: [{
+			type: i0.Output,
+			args: ["activated"]
+		}]
+	}
+});
+export { HyHotspot };
+
+//# sourceMappingURL=hyalo-angular-hotspot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-hotspot.mjs","names":[],"sources":["../../../projects/hyalo/hotspot/hotspot.ts","../../../projects/hyalo/hotspot/hotspot.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  computed,\r\n  input,\r\n  inject,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { HyMotion } from '@hyalo/angular/motion';\r\nimport { HyPopover } from '@hyalo/angular/popover';\r\nimport type { HyPlacement } from '@hyalo/angular/overlay';\r\nexport type HyHotspotMode = 'label' | 'pin';\r\nexport interface HyHotspotPosition {\r\n  readonly x: number;\r\n  readonly y: number;\r\n  readonly visible?: boolean;\r\n}\r\n/** Pass screen coordinates from your scene's projection. Position is relative to its frame. */\r\n@Component({\r\n  selector: 'hy-hotspot',\r\n  imports: [HyPopover],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[style.inset-inline-start.%]': 'position().x',\r\n    '[style.inset-block-start.%]': 'position().y',\r\n    '[hidden]': '!visible()',\r\n    '[attr.data-mode]': 'mode()',\r\n    '[attr.data-open]': 'open()',\r\n    '[attr.data-motion]': 'motion.enabled()',\r\n    '[style.--hy-hotspot-duration]': 'motion.enabled() ? \"var(--hy-dur-quick)\" : \"0ms\"',\r\n  },\r\n  templateUrl: './hotspot.html',\r\n  styleUrl: './hotspot.css',\r\n})\r\nexport class HyHotspot {\r\n  protected readonly motion = inject(HyMotion);\r\n  readonly label = input.required<string>();\r\n  readonly position = input.required<HyHotspotPosition>();\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  /** Optional detail panel. Without a description this stays a plain action button. */\r\n  readonly description = input('');\r\n  readonly mode = input<HyHotspotMode>('label');\r\n  readonly open = model(false);\r\n  readonly placement = input<HyPlacement>('top');\r\n  readonly closeLabel = input('Close details');\r\n  readonly activated = output<void>();\r\n  protected readonly visible = computed(\r\n    () =>\r\n      this.position().visible !== false &&\r\n      Number.isFinite(this.position().x) &&\r\n      Number.isFinite(this.position().y),\r\n  );\r\n}\r\n","@if (description()) {\r\n  <button\r\n    #popover=\"hyPopover\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [hyPopover]=\"details\"\r\n    [popoverLabel]=\"label()\"\r\n    popoverMaterial=\"solid\"\r\n    [popoverPlacement]=\"placement()\"\r\n    [(popoverOpen)]=\"open\"\r\n    (click)=\"activated.emit()\"\r\n  >\r\n    <span class=\"dot\" aria-hidden=\"true\"></span><span class=\"label\">{{ label() }}</span>\r\n  </button>\r\n  <ng-template #details>\r\n    <div class=\"details\">\r\n      <strong>{{ label() }}</strong>\r\n      <p>{{ description() }}</p>\r\n      <button class=\"close\" type=\"button\" (click)=\"popover.close()\">{{ closeLabel() }}</button>\r\n    </div>\r\n  </ng-template>\r\n} @else {\r\n  <button\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"label()\"\r\n    (click)=\"activated.emit()\"\r\n  >\r\n    <span class=\"dot\" aria-hidden=\"true\"></span><span class=\"label\">{{ label() }}</span>\r\n  </button>\r\n}\r\n"],"mappings":"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"}