@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-scroll-area.mjs

@@ -0,0 +1,65 @@
+import * as i0 from "@angular/core";
+import { Directive, input } from "@angular/core";
+var VdScrollArea = class VdScrollArea {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdScrollArea,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdScrollArea,
+		isStandalone: true,
+		selector: "[vdScrollArea]",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "region",
+				"tabindex": "0"
+			},
+			properties: { "attr.aria-label": "label()" },
+			classAttribute: "vd-scroll-area"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdScrollArea,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdScrollArea]",
+			host: {
+				class: "vd-scroll-area",
+				role: "region",
+				tabindex: "0",
+				"[attr.aria-label]": "label()"
+			}
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: true
+		}]
+	}] }
+});
+export { VdScrollArea };
+
+//# sourceMappingURL=vadem-ui-scroll-area.mjs.map

package/fesm2022/vadem-ui-scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-scroll-area.mjs","names":[],"sources":["../../../projects/ui/scroll-area/src/scroll-area.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\n\n/** A named native scroll viewport; the browser owns all scrolling and descendant keys. */\n@Directive({\n  selector: '[vdScrollArea]',\n  host: {\n    class: 'vd-scroll-area',\n    role: 'region',\n    tabindex: '0',\n    '[attr.aria-label]': 'label()',\n  },\n})\nexport class VdScrollArea {\n  readonly label = input.required<string>();\n}\n"],"mappings":";;AAYA,IAAa,eAAb,MAAa,aAAY;CACd,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAD9B,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,OAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,YAAA;GAAA;GAAA,YAAA,EAAA,mBAAA,UAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;CAAA,CAAA;;AAAZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EATxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,OAAO;IACP,MAAM;IACN,UAAU;IACV,qBAAqB;GACtB;EACF,CAAA"}

package/fesm2022/vadem-ui-search-input.mjs

@@ -0,0 +1,307 @@
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, ViewEncapsulation, afterEveryRender, booleanAttribute, contentChild, inject, input, output, signal } from "@angular/core";
+import { VdButton } from "@vadem/ui/button";
+import { VdIcon } from "@vadem/ui/icon";
+import { VdInput } from "@vadem/ui/input";
+import { vdTexts } from "@vadem/ui/locale";
+import { VdProgressRing } from "@vadem/ui/progress";
+var VdSearchInput = class VdSearchInput extends VdInput {
+	element = inject(ElementRef).nativeElement;
+	cleared = output();
+	document = inject(DOCUMENT);
+	hasValue = signal(false, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+	filled = this.hasValue.asReadonly();
+	editable = signal(true, ...ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []);
+	canClear = this.editable.asReadonly();
+	constructor() {
+		super();
+		afterEveryRender(() => {
+			this.sync();
+			this.editable.set(!this.element.disabled && !this.element.readOnly);
+		});
+	}
+	sync() {
+		this.hasValue.set(this.element.value !== "");
+	}
+	onEscape(event) {
+		if (!this.hasValue() || !this.editable()) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.clear();
+	}
+	clear() {
+		if (!this.editable()) return;
+		this.element.value = "";
+		this.element.dispatchEvent(new Event("input", { bubbles: true }));
+		this.element.dispatchEvent(new Event("search", { bubbles: true }));
+		this.sync();
+		if (this.document.activeElement !== this.element) this.element.focus();
+		this.cleared.emit();
+	}
+	preserveFocus(event) {
+		if (event.button === 0) event.preventDefault();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSearchInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdSearchInput,
+		isStandalone: true,
+		selector: "input[type=search][vdSearchInput]",
+		outputs: { cleared: "cleared" },
+		host: {
+			listeners: {
+				"input": "sync()",
+				"keydown.escape": "onEscape($event)"
+			},
+			classAttribute: "vd-search-input__input"
+		},
+		exportAs: ["vdSearchInput"],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSearchInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[type=search][vdSearchInput]",
+			exportAs: "vdSearchInput",
+			host: {
+				class: "vd-search-input__input",
+				"(input)": "sync()",
+				"(keydown.escape)": "onEscape($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { cleared: [{
+		type: i0.Output,
+		args: ["cleared"]
+	}] }
+});
+var VdSearchInputGroup = class VdSearchInputGroup {
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearLabel = input(...ngDevMode ? [void 0, { debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	loadingLabel = input(...ngDevMode ? [void 0, { debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("searchInput", {
+		clearLabel: this.clearLabel,
+		loadingLabel: this.loadingLabel
+	});
+	control = contentChild(VdSearchInput, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSearchInputGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdSearchInputGroup,
+		isStandalone: true,
+		selector: "vd-search-input",
+		inputs: {
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-filled": "control()?.filled() ? \"\" : null",
+				"attr.data-loading": "loading() ? \"\" : null"
+			},
+			classAttribute: "vd-input-group vd-search-input"
+		},
+		queries: [{
+			propertyName: "control",
+			first: true,
+			predicate: VdSearchInput,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <vd-icon slot="start" name="search" />
+    <ng-content select="input[vdSearchInput]" />
+    @if (loading()) {
+      <vd-progress-ring slot="end" size="sm" [label]="t().loadingLabel" />
+    }
+    @if (control()?.filled() && control()?.canClear()) {
+      <button
+        vdButton
+        type="button"
+        variant="ghost"
+        iconOnly
+        slot="end"
+        class="vd-search-input__clear"
+        [size]="control()?.size() ?? 'md'"
+        [attr.aria-label]="t().clearLabel"
+        [attr.aria-controls]="control()?.id() ?? null"
+        (mousedown)="control()?.preserveFocus($event)"
+        (click)="control()?.clear()"
+      >
+        <vd-icon name="x" />
+      </button>
+    } @else {
+      <ng-content select="[slot=end]" />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: VdButton,
+				selector: "button[vdButton], a[vdButton]",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"type"
+				]
+			},
+			{
+				kind: "component",
+				type: VdIcon,
+				selector: "vd-icon",
+				inputs: ["name", "label"]
+			},
+			{
+				kind: "component",
+				type: VdProgressRing,
+				selector: "vd-progress-ring",
+				inputs: [
+					"value",
+					"max",
+					"size",
+					"variant",
+					"showValue",
+					"label"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSearchInputGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-search-input",
+			imports: [
+				VdButton,
+				VdIcon,
+				VdProgressRing
+			],
+			template: `
+    <vd-icon slot="start" name="search" />
+    <ng-content select="input[vdSearchInput]" />
+    @if (loading()) {
+      <vd-progress-ring slot="end" size="sm" [label]="t().loadingLabel" />
+    }
+    @if (control()?.filled() && control()?.canClear()) {
+      <button
+        vdButton
+        type="button"
+        variant="ghost"
+        iconOnly
+        slot="end"
+        class="vd-search-input__clear"
+        [size]="control()?.size() ?? 'md'"
+        [attr.aria-label]="t().clearLabel"
+        [attr.aria-controls]="control()?.id() ?? null"
+        (mousedown)="control()?.preserveFocus($event)"
+        (click)="control()?.clear()"
+      >
+        <vd-icon name="x" />
+      </button>
+    } @else {
+      <ng-content select="[slot=end]" />
+    }
+  `,
+			host: {
+				class: "vd-input-group vd-search-input",
+				"[attr.data-filled]": "control()?.filled() ? \"\" : null",
+				"[attr.data-loading]": "loading() ? \"\" : null"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		control: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => VdSearchInput), { isSignal: true }]
+		}]
+	}
+});
+const VD_SEARCH_INPUT = [VdSearchInputGroup, VdSearchInput];
+export { VD_SEARCH_INPUT, VdSearchInput, VdSearchInputGroup };
+
+//# sourceMappingURL=vadem-ui-search-input.mjs.map

package/fesm2022/vadem-ui-search-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-search-input.mjs","names":[],"sources":["../../../projects/ui/search-input/src/search-input.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport {\n  afterEveryRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { VdButton } from '@vadem/ui/button';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { VdInput } from '@vadem/ui/input';\nimport { vdTexts } from '@vadem/ui/locale';\nimport { VdProgressRing } from '@vadem/ui/progress';\n\n/**\n * Native `input[type=search]`: value, forms accessor and the `search` event stay native.\n * Adds consistent Escape-to-clear and a clear action. Spec: specs/search-input.md\n */\n@Directive({\n  selector: 'input[type=search][vdSearchInput]',\n  exportAs: 'vdSearchInput',\n  host: {\n    class: 'vd-search-input__input',\n    '(input)': 'sync()',\n    '(keydown.escape)': 'onEscape($event)',\n  },\n})\nexport class VdSearchInput extends VdInput {\n  readonly element: HTMLInputElement = inject(ElementRef).nativeElement;\n  /** Emits after the value was cleared by the button or Escape. */\n  readonly cleared = output<void>();\n\n  private readonly document = inject(DOCUMENT);\n  private readonly hasValue = signal(false);\n  readonly filled = this.hasValue.asReadonly();\n  private readonly editable = signal(true);\n  readonly canClear = this.editable.asReadonly();\n\n  constructor() {\n    super();\n    // Forms can set the value programmatically without an input event.\n    afterEveryRender(() => {\n      this.sync();\n      this.editable.set(!this.element.disabled && !this.element.readOnly);\n    });\n  }\n\n  protected sync(): void {\n    this.hasValue.set(this.element.value !== '');\n  }\n\n  /** Escape clears a non-empty field; an empty field lets Escape reach outer handlers (dialogs). */\n  protected onEscape(event: Event): void {\n    if (!this.hasValue() || !this.editable()) return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.clear();\n  }\n\n  clear(): void {\n    if (!this.editable()) return;\n    this.element.value = '';\n    // Forms and consumers listen to the native events.\n    this.element.dispatchEvent(new Event('input', { bubbles: true }));\n    this.element.dispatchEvent(new Event('search', { bubbles: true }));\n    this.sync();\n    if (this.document.activeElement !== this.element) this.element.focus();\n    this.cleared.emit();\n  }\n\n  /** Pointer activation keeps the caret in the field. */\n  preserveFocus(event: MouseEvent): void {\n    if (event.button === 0) event.preventDefault();\n  }\n}\n\n@Component({\n  selector: 'vd-search-input',\n  imports: [VdButton, VdIcon, VdProgressRing],\n  template: `\n    <vd-icon slot=\"start\" name=\"search\" />\n    <ng-content select=\"input[vdSearchInput]\" />\n    @if (loading()) {\n      <vd-progress-ring slot=\"end\" size=\"sm\" [label]=\"t().loadingLabel\" />\n    }\n    @if (control()?.filled() && control()?.canClear()) {\n      <button\n        vdButton\n        type=\"button\"\n        variant=\"ghost\"\n        iconOnly\n        slot=\"end\"\n        class=\"vd-search-input__clear\"\n        [size]=\"control()?.size() ?? 'md'\"\n        [attr.aria-label]=\"t().clearLabel\"\n        [attr.aria-controls]=\"control()?.id() ?? null\"\n        (mousedown)=\"control()?.preserveFocus($event)\"\n        (click)=\"control()?.clear()\"\n      >\n        <vd-icon name=\"x\" />\n      </button>\n    } @else {\n      <ng-content select=\"[slot=end]\" />\n    }\n  `,\n  host: {\n    class: 'vd-input-group vd-search-input',\n    '[attr.data-filled]': 'control()?.filled() ? \"\" : null',\n    '[attr.data-loading]': 'loading() ? \"\" : null',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdSearchInputGroup {\n  /** Shows a spinner while results load; the field stays editable. */\n  readonly loading = input(false, { transform: booleanAttribute });\n  readonly clearLabel = input<string>();\n  readonly loadingLabel = input<string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('searchInput', {\n    clearLabel: this.clearLabel,\n    loadingLabel: this.loadingLabel,\n  });\n  protected readonly control = contentChild(VdSearchInput);\n}\n\nexport const VD_SEARCH_INPUT = [VdSearchInputGroup, VdSearchInput] as const;\n"],"mappings":"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"}

package/fesm2022/vadem-ui-segmented.mjs

@@ -0,0 +1,297 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, forwardRef, inject, input, model, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { vdUniqueId } from "@vadem/ui/field";
+var VdSegmented = class VdSegmented {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	name = vdUniqueId("vd-segmented");
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => void 0;
+	onTouched = () => void 0;
+	select(value) {
+		if (this.isDisabled() || value === this.value()) return;
+		this.value.set(value);
+		this.onChange(value);
+	}
+	onFocusOut(event) {
+		if (!event.currentTarget.contains(event.relatedTarget)) this.onTouched();
+	}
+	writeValue(value) {
+		this.value.set(value ?? null);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.formDisabled.set(disabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSegmented,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdSegmented,
+		isStandalone: true,
+		selector: "vd-segmented",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			attributes: { "role": "radiogroup" },
+			listeners: { "focusout": "onFocusOut($event)" },
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.aria-disabled": "isDisabled() || null"
+			},
+			classAttribute: "vd-segmented"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => VdSegmented),
+			multi: true
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSegmented,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-segmented",
+			template: `<ng-content />`,
+			host: {
+				class: "vd-segmented",
+				role: "radiogroup",
+				"[attr.data-size]": "size()",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.aria-disabled]": "isDisabled() || null",
+				"(focusout)": "onFocusOut($event)"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => VdSegmented),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var VdSegment = class VdSegment {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	group = inject(VdSegmented);
+	labelId = vdUniqueId("vd-segment-label");
+	checked = computed(() => this.group.value() === this.value(), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.group.isDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSegment,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdSegment,
+		isStandalone: true,
+		selector: "vd-segment",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-checked": "checked() ? \"\" : null",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.data-icon-only": "ariaLabel() ? \"\" : null",
+				"attr.aria-label": "null"
+			},
+			classAttribute: "vd-segment"
+		},
+		ngImport: i0,
+		template: `
+    <input
+      type="radio"
+      class="vd-segment__input"
+      [name]="group.name"
+      [value]="value()"
+      [checked]="checked()"
+      [disabled]="isDisabled()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabel() ? null : labelId"
+      (change)="group.select(value())"
+    />
+    <span class="vd-segment__label" [id]="labelId"><ng-content /></span>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSegment,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-segment",
+			template: `
+    <input
+      type="radio"
+      class="vd-segment__input"
+      [name]="group.name"
+      [value]="value()"
+      [checked]="checked()"
+      [disabled]="isDisabled()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabel() ? null : labelId"
+      (change)="group.select(value())"
+    />
+    <span class="vd-segment__label" [id]="labelId"><ng-content /></span>
+  `,
+			host: {
+				class: "vd-segment",
+				"[attr.data-checked]": "checked() ? \"\" : null",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.data-icon-only]": "ariaLabel() ? \"\" : null",
+				"[attr.aria-label]": "null"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}]
+	}
+});
+export { VdSegment, VdSegmented };
+
+//# sourceMappingURL=vadem-ui-segmented.mjs.map