@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-popover.mjs

@@ -0,0 +1,178 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, afterNextRender, inject, input, signal } from "@angular/core";
+import { vdUniqueId } from "@vadem/ui/field";
+var VdPopover = class VdPopover {
+	placement = input("bottom", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	id = vdUniqueId("vd-popover");
+	el = inject(ElementRef).nativeElement;
+	hide() {
+		if (this.el.matches(":popover-open")) this.el.hidePopover();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdPopover,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdPopover,
+		isStandalone: true,
+		selector: "[vdPopover]",
+		inputs: { placement: {
+			classPropertyName: "placement",
+			publicName: "placement",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"popover": "auto",
+				"role": "dialog"
+			},
+			properties: {
+				"id": "id",
+				"attr.data-placement": "placement()"
+			},
+			classAttribute: "vd-popover"
+		},
+		exportAs: ["vdPopover"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdPopover,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdPopover]",
+			exportAs: "vdPopover",
+			host: {
+				class: "vd-popover",
+				popover: "auto",
+				role: "dialog",
+				"[id]": "id",
+				"[attr.data-placement]": "placement()"
+			}
+		}]
+	}],
+	propDecorators: { placement: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "placement",
+			required: false
+		}]
+	}] }
+});
+var VdPopoverTrigger = class VdPopoverTrigger {
+	vdPopoverTrigger = input.required(...ngDevMode ? [{ debugName: "vdPopoverTrigger" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	el = inject(ElementRef).nativeElement;
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const popover = this.vdPopoverTrigger();
+			const name = `--${popover.id}`;
+			this.el.style.setProperty("anchor-name", name);
+			popover.el.style.setProperty("position-anchor", name);
+			const onToggle = (event) => {
+				const opened = event.newState === "open";
+				this.open.set(opened);
+				if (opened) this.focusInside(popover.el);
+			};
+			popover.el.addEventListener("toggle", onToggle);
+			destroyRef.onDestroy(() => popover.el.removeEventListener("toggle", onToggle));
+		});
+	}
+	openAtPress = null;
+	rememberState() {
+		this.openAtPress = this.vdPopoverTrigger().el.matches(":popover-open");
+	}
+	toggle() {
+		const popover = this.vdPopoverTrigger().el;
+		const wasOpen = this.openAtPress ?? popover.matches(":popover-open");
+		this.openAtPress = null;
+		if (wasOpen) {
+			if (popover.matches(":popover-open")) popover.hidePopover();
+		} else popover.showPopover({ source: this.el });
+	}
+	focusInside(panel) {
+		(panel.querySelector("[autofocus]") ?? panel.querySelector("button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdPopoverTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdPopoverTrigger,
+		isStandalone: true,
+		selector: "button[vdPopoverTrigger]",
+		inputs: { vdPopoverTrigger: {
+			classPropertyName: "vdPopoverTrigger",
+			publicName: "vdPopoverTrigger",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-haspopup": "dialog" },
+			listeners: {
+				"pointerdown": "rememberState()",
+				"click": "toggle()"
+			},
+			properties: {
+				"attr.aria-expanded": "open()",
+				"attr.aria-controls": "vdPopoverTrigger().id",
+				"attr.data-state": "open() ? \"open\" : \"closed\""
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdPopoverTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[vdPopoverTrigger]",
+			host: {
+				"aria-haspopup": "dialog",
+				"[attr.aria-expanded]": "open()",
+				"[attr.aria-controls]": "vdPopoverTrigger().id",
+				"[attr.data-state]": "open() ? \"open\" : \"closed\"",
+				"(pointerdown)": "rememberState()",
+				"(click)": "toggle()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { vdPopoverTrigger: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "vdPopoverTrigger",
+			required: true
+		}]
+	}] }
+});
+const VD_POPOVER = [VdPopover, VdPopoverTrigger];
+export { VD_POPOVER, VdPopover, VdPopoverTrigger };
+
+//# sourceMappingURL=vadem-ui-popover.mjs.map

package/fesm2022/vadem-ui-popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-popover.mjs","names":[],"sources":["../../../projects/ui/popover/src/popover.ts"],"sourcesContent":["import {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  afterNextRender,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { vdUniqueId } from '@vadem/ui/field';\n\nexport type VdPopoverPlacement = 'bottom' | 'top' | 'start' | 'end';\n\n/**\n * Non-modal floating panel with any content (filters, a share form, details): a\n * `popover=\"auto\"` in the top layer, anchored to its trigger with CSS anchor positioning.\n * Light dismiss and Escape are native. Give it a name (`aria-label` / `aria-labelledby`).\n * Spec: specs/popover.md\n */\n@Directive({\n  selector: '[vdPopover]',\n  exportAs: 'vdPopover',\n  host: {\n    class: 'vd-popover',\n    popover: 'auto',\n    role: 'dialog',\n    '[id]': 'id',\n    '[attr.data-placement]': 'placement()',\n  },\n})\nexport class VdPopover {\n  readonly placement = input<VdPopoverPlacement>('bottom');\n  readonly id = vdUniqueId('vd-popover');\n  readonly el: HTMLElement = inject(ElementRef).nativeElement;\n\n  hide(): void {\n    if (this.el.matches(':popover-open')) this.el.hidePopover();\n  }\n}\n\n/**\n * Toggles a `vdPopover` from a button. On open, focus moves to the popover's `[autofocus]`\n * element or its first focusable one; closing returns focus to the trigger (the trigger is the\n * popover's invoker).\n */\n@Directive({\n  selector: 'button[vdPopoverTrigger]',\n  host: {\n    'aria-haspopup': 'dialog',\n    '[attr.aria-expanded]': 'open()',\n    '[attr.aria-controls]': 'vdPopoverTrigger().id',\n    '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\n    '(pointerdown)': 'rememberState()',\n    '(click)': 'toggle()',\n  },\n})\nexport class VdPopoverTrigger {\n  readonly vdPopoverTrigger = input.required<VdPopover>();\n  protected readonly open = signal(false);\n  private readonly el: HTMLButtonElement = inject(ElementRef).nativeElement;\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n    afterNextRender(() => {\n      const popover = this.vdPopoverTrigger();\n      const name = `--${popover.id}`;\n      this.el.style.setProperty('anchor-name', name);\n      popover.el.style.setProperty('position-anchor', name);\n      const onToggle = (event: Event) => {\n        const opened = (event as ToggleEvent).newState === 'open';\n        this.open.set(opened);\n        if (opened) this.focusInside(popover.el);\n      };\n      popover.el.addEventListener('toggle', onToggle);\n      destroyRef.onDestroy(() => popover.el.removeEventListener('toggle', onToggle));\n    });\n  }\n\n  /** Open state when the press started: light dismiss may already have closed it by click. */\n  private openAtPress: boolean | null = null;\n\n  protected rememberState(): void {\n    this.openAtPress = this.vdPopoverTrigger().el.matches(':popover-open');\n  }\n\n  protected toggle(): void {\n    const popover = this.vdPopoverTrigger().el;\n    // Keyboard activation has no pointerdown: use the current state.\n    const wasOpen = this.openAtPress ?? popover.matches(':popover-open');\n    this.openAtPress = null;\n    if (wasOpen) {\n      if (popover.matches(':popover-open')) popover.hidePopover();\n    }\n    // `source` makes the trigger the invoker (focus returns to it on close). Some engines still\n    // light-dismiss on the trigger's pointerdown; `openAtPress` keeps the toggle correct then.\n    else popover.showPopover({ source: this.el } as ShowPopoverOptions);\n  }\n\n  private focusInside(panel: HTMLElement): void {\n    const target =\n      panel.querySelector<HTMLElement>('[autofocus]') ??\n      panel.querySelector<HTMLElement>(\n        'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])',\n      );\n    target?.focus();\n  }\n}\n\nexport const VD_POPOVER = [VdPopover, VdPopoverTrigger] as const;\n"],"mappings":"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"}

package/fesm2022/vadem-ui-progress.mjs

@@ -0,0 +1,331 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, booleanAttribute, computed, input, numberAttribute } from "@angular/core";
+import { vdTexts } from "@vadem/ui/locale";
+var VdProgress = class VdProgress {
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	variant = input("accent", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdProgress,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdProgress,
+		isStandalone: true,
+		selector: "progress[vdProgress]",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-variant": "variant()"
+			},
+			classAttribute: "vd-progress"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdProgress,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "progress[vdProgress]",
+			host: {
+				class: "vd-progress",
+				"[attr.data-size]": "size()",
+				"[attr.data-variant]": "variant()"
+			}
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}]
+	}
+});
+var VdMeter = class VdMeter {
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMeter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdMeter,
+		isStandalone: true,
+		selector: "meter[vdMeter]",
+		inputs: { size: {
+			classPropertyName: "size",
+			publicName: "size",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.data-size": "size()" },
+			classAttribute: "vd-meter"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMeter,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "meter[vdMeter]",
+			host: {
+				class: "vd-meter",
+				"[attr.data-size]": "size()"
+			}
+		}]
+	}],
+	propDecorators: { size: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "size",
+			required: false
+		}]
+	}] }
+});
+const optionalNumber = (value) => value === null || value === void 0 || value === "" ? null : numberAttribute(value);
+var VdProgressRing = class VdProgressRing {
+	value = input(null, {
+		...ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {},
+		transform: optionalNumber
+	});
+	max = input(100, {
+		...ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	variant = input("accent", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	showValue = input(false, {
+		...ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	t = vdTexts("progressRing", { label: this.label });
+	determinate = computed(() => this.value() !== null, ...ngDevMode ? [{ debugName: "determinate" }] : /* istanbul ignore next */ []);
+	clamped = computed(() => Math.min(Math.max(this.value() ?? 0, 0), Math.max(this.max(), 0)), ...ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []);
+	percent = computed(() => this.max() > 0 ? Math.round(this.clamped() / this.max() * 100) : 0, ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdProgressRing,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdProgressRing,
+		isStandalone: true,
+		selector: "vd-progress-ring",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "progressbar" },
+			properties: {
+				"attr.aria-label": "t().label",
+				"attr.aria-valuemin": "determinate() ? 0 : null",
+				"attr.aria-valuemax": "determinate() ? max() : null",
+				"attr.aria-valuenow": "determinate() ? clamped() : null",
+				"attr.data-size": "size()",
+				"attr.data-variant": "variant()",
+				"attr.data-indeterminate": "determinate() ? null : \"\"",
+				"style.--vd-progress-ring-value": "percent()"
+			},
+			classAttribute: "vd-progress-ring"
+		},
+		ngImport: i0,
+		template: `
+    <svg class="vd-progress-ring__svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <circle class="vd-progress-ring__track" cx="12" cy="12" r="10" pathLength="100" />
+      <circle class="vd-progress-ring__indicator" cx="12" cy="12" r="10" pathLength="100" />
+    </svg>
+    @if (showValue() && determinate()) {
+      <span class="vd-progress-ring__value" aria-hidden="true">{{ percent() }}%</span>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdProgressRing,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-progress-ring",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "vd-progress-ring",
+				role: "progressbar",
+				"[attr.aria-label]": "t().label",
+				"[attr.aria-valuemin]": "determinate() ? 0 : null",
+				"[attr.aria-valuemax]": "determinate() ? max() : null",
+				"[attr.aria-valuenow]": "determinate() ? clamped() : null",
+				"[attr.data-size]": "size()",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-indeterminate]": "determinate() ? null : \"\"",
+				"[style.--vd-progress-ring-value]": "percent()"
+			},
+			template: `
+    <svg class="vd-progress-ring__svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <circle class="vd-progress-ring__track" cx="12" cy="12" r="10" pathLength="100" />
+      <circle class="vd-progress-ring__indicator" cx="12" cy="12" r="10" pathLength="100" />
+    </svg>
+    @if (showValue() && determinate()) {
+      <span class="vd-progress-ring__value" aria-hidden="true">{{ percent() }}%</span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdMeter, VdProgress, VdProgressRing };
+
+//# sourceMappingURL=vadem-ui-progress.mjs.map

package/fesm2022/vadem-ui-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-progress.mjs","names":[],"sources":["../../../projects/ui/progress/src/progress.ts","../../../projects/ui/progress/src/progress-ring.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\n\nexport type VdProgressSize = 'sm' | 'md';\nexport type VdProgressVariant = 'accent' | 'success' | 'warning' | 'danger';\n\n/**\n * Styles a native `<progress>`: completion of a task. Without `value` it is indeterminate.\n * Role, value and labelling (`<label for>`, `aria-label`) stay native. Spec: specs/progress.md\n */\n@Directive({\n  selector: 'progress[vdProgress]',\n  host: {\n    class: 'vd-progress',\n    '[attr.data-size]': 'size()',\n    '[attr.data-variant]': 'variant()',\n  },\n})\nexport class VdProgress {\n  readonly size = input<VdProgressSize>('md');\n  readonly variant = input<VdProgressVariant>('accent');\n}\n\n/**\n * Styles a native `<meter>`: a measurement within a known range (quota, disk, score).\n * Colors follow the native `low` / `high` / `optimum` regions. Spec: specs/progress.md\n */\n@Directive({\n  selector: 'meter[vdMeter]',\n  host: {\n    class: 'vd-meter',\n    '[attr.data-size]': 'size()',\n  },\n})\nexport class VdMeter {\n  readonly size = input<VdProgressSize>('md');\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  input,\n  numberAttribute,\n} from '@angular/core';\nimport { vdTexts } from '@vadem/ui/locale';\nimport type { VdProgressVariant } from './progress';\n\nexport type VdProgressRingSize = 'sm' | 'md' | 'lg';\n\nconst optionalNumber = (value: unknown): number | null =>\n  value === null || value === undefined || value === '' ? null : numberAttribute(value);\n\n/**\n * Circular progress. Without `value` it is indeterminate (a spinner); with `value` it shows\n * completion. Spec: specs/progress.md\n */\n@Component({\n  selector: 'vd-progress-ring',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'vd-progress-ring',\n    role: 'progressbar',\n    '[attr.aria-label]': 't().label',\n    '[attr.aria-valuemin]': 'determinate() ? 0 : null',\n    '[attr.aria-valuemax]': 'determinate() ? max() : null',\n    '[attr.aria-valuenow]': 'determinate() ? clamped() : null',\n    '[attr.data-size]': 'size()',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-indeterminate]': 'determinate() ? null : \"\"',\n    '[style.--vd-progress-ring-value]': 'percent()',\n  },\n  template: `\n    <svg class=\"vd-progress-ring__svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n      <circle class=\"vd-progress-ring__track\" cx=\"12\" cy=\"12\" r=\"10\" pathLength=\"100\" />\n      <circle class=\"vd-progress-ring__indicator\" cx=\"12\" cy=\"12\" r=\"10\" pathLength=\"100\" />\n    </svg>\n    @if (showValue() && determinate()) {\n      <span class=\"vd-progress-ring__value\" aria-hidden=\"true\">{{ percent() }}%</span>\n    }\n  `,\n})\nexport class VdProgressRing {\n  /** Completed amount; leave empty for an indeterminate spinner. */\n  readonly value = input<number | null, unknown>(null, { transform: optionalNumber });\n  readonly max = input(100, { transform: numberAttribute });\n  readonly size = input<VdProgressRingSize>('md');\n  readonly variant = input<VdProgressVariant>('accent');\n  /** Percentage in the centre; shown at size lg only. */\n  readonly showValue = input(false, { transform: booleanAttribute });\n  /** Accessible name; defaults to the locale's \"Loading\". */\n  readonly label = input<string>();\n  protected readonly t = vdTexts('progressRing', { label: this.label });\n\n  protected readonly determinate = computed(() => this.value() !== null);\n  protected readonly clamped = computed(() =>\n    Math.min(Math.max(this.value() ?? 0, 0), Math.max(this.max(), 0)),\n  );\n  protected readonly percent = computed(() =>\n    this.max() > 0 ? Math.round((this.clamped() / this.max()) * 100) : 0,\n  );\n}\n"],"mappings":"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"}

package/fesm2022/vadem-ui-radio.mjs

@@ -0,0 +1,39 @@
+import * as i0 from "@angular/core";
+import { Directive } from "@angular/core";
+import { VdFieldControlBase } from "@vadem/ui/field";
+var VdRadio = class VdRadio extends VdFieldControlBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdRadio,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdRadio,
+		isStandalone: true,
+		selector: "input[type=radio][vdRadio]",
+		host: { classAttribute: "vd-radio" },
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdRadio,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[type=radio][vdRadio]",
+			host: { class: "vd-radio" }
+		}]
+	}]
+});
+export { VdRadio };
+
+//# sourceMappingURL=vadem-ui-radio.mjs.map

package/fesm2022/vadem-ui-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-radio.mjs","names":[],"sources":["../../../projects/ui/radio/src/radio.ts"],"sourcesContent":["import { Directive } from '@angular/core';\nimport { VdFieldControlBase } from '@vadem/ui/field';\n\n/**\n * Styles a native `<input type=\"radio\">`. Grouping (shared `name`), arrow keys and form values\n * stay native; wrap each in `label[vdChoice]` and the group in `fieldset[vdFieldset]`.\n * Spec: specs/radio.md\n */\n@Directive({\n  selector: 'input[type=radio][vdRadio]',\n  host: { class: 'vd-radio' },\n})\nexport class VdRadio extends VdFieldControlBase {}\n"],"mappings":";;;AAYA,IAAa,UAAb,MAAa,gBAAgB,mBAAkB;CAAlC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,WAAA;EAAA,iBAAA;EAAA,UAAA;CAAA,CAAA;;AAAP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAJnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,OAAO,WAAU;EAC1B,CAAA"}