@hyalo/angular 0.0.0-stage → 0.1.0

package/fesm2022/hyalo-angular-choice.mjs

@@ -0,0 +1,788 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output, signal } from "@angular/core";
+import { injectId, rubberband } from "@hyalo/angular";
+import { HyIcon } from "@hyalo/angular/icon";
+var HyCheckbox = class HyCheckbox {
+	descriptionId = injectId("checkbox-desc");
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	indeterminate = model(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	onChange(event) {
+		this.indeterminate.set(false);
+		this.checked.set(event.target.checked);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCheckbox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyCheckbox,
+		isStandalone: true,
+		selector: "hy-checkbox",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indeterminate: {
+				classPropertyName: "indeterminate",
+				publicName: "indeterminate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			indeterminate: "indeterminateChange",
+			touch: "touch"
+		},
+		host: {
+			properties: {
+				"attr.data-checked": "checked() || null",
+				"attr.data-indeterminate": "indeterminate() || null",
+				"attr.data-disabled": "disabled() || null",
+				"attr.data-invalid": "(invalid() && touched()) || null"
+			},
+			classAttribute: "hy-choice hy-checkbox"
+		},
+		ngImport: i0,
+		template: "<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-checkbox__box\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [indeterminate]=\"indeterminate()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-invalid]=\"(invalid() && touched()) || null\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <hy-icon\r\n      class=\"hy-checkbox__mark\"\r\n      [name]=\"indeterminate() ? 'minus' : 'check'\"\r\n      [strokeWidth]=\"2.5\"\r\n    />\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n",
+		styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: HyIcon,
+			selector: "hy-icon",
+			inputs: [
+				"name",
+				"icon",
+				"label",
+				"size",
+				"strokeWidth"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCheckbox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-checkbox",
+			imports: [HyIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-choice hy-checkbox",
+				"[attr.data-checked]": "checked() || null",
+				"[attr.data-indeterminate]": "indeterminate() || null",
+				"[attr.data-disabled]": "disabled() || null",
+				"[attr.data-invalid]": "(invalid() && touched()) || null"
+			},
+			template: "<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-checkbox__box\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [indeterminate]=\"indeterminate()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-invalid]=\"(invalid() && touched()) || null\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <hy-icon\r\n      class=\"hy-checkbox__mark\"\r\n      [name]=\"indeterminate() ? 'minus' : 'check'\"\r\n      [strokeWidth]=\"2.5\"\r\n    />\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n",
+			styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		indeterminate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indeterminate",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["indeterminateChange"]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+var HyRadioGroup = class HyRadioGroup {
+	labelId = injectId("radio-label");
+	generatedName = injectId("radio");
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+	touch = output();
+	groupName = computed(() => this.name() || this.generatedName, ...ngDevMode ? [{ debugName: "groupName" }] : /* istanbul ignore next */ []);
+	showsError = computed(() => this.invalid() && this.touched(), ...ngDevMode ? [{ debugName: "showsError" }] : /* istanbul ignore next */ []);
+	errorMessage = computed(() => {
+		const first = this.errors()[0];
+		return first ? first.message ?? first.kind : "";
+	}, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyRadioGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyRadioGroup,
+		isStandalone: true,
+		selector: "hy-radio-group",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errors: {
+				classPropertyName: "errors",
+				publicName: "errors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			attributes: { "role": "radiogroup" },
+			properties: {
+				"attr.aria-labelledby": "label() ? labelId : null",
+				"attr.aria-invalid": "showsError() || null",
+				"attr.aria-required": "required() || null",
+				"attr.data-orientation": "orientation()"
+			},
+			classAttribute: "hy-radio-group"
+		},
+		ngImport: i0,
+		template: "@if (label()) {\r\n  <span class=\"hy-radio-group__label\" [id]=\"labelId\">{{ label() }}</span>\r\n}\r\n<div class=\"hy-radio-group__items\"><ng-content /></div>\r\n@if (showsError()) {\r\n  <p class=\"hy-choice__error\">{{ errorMessage() }}</p>\r\n}\r\n",
+		styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyRadioGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-radio-group",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-radio-group",
+				role: "radiogroup",
+				"[attr.aria-labelledby]": "label() ? labelId : null",
+				"[attr.aria-invalid]": "showsError() || null",
+				"[attr.aria-required]": "required() || null",
+				"[attr.data-orientation]": "orientation()"
+			},
+			template: "@if (label()) {\r\n  <span class=\"hy-radio-group__label\" [id]=\"labelId\">{{ label() }}</span>\r\n}\r\n<div class=\"hy-radio-group__items\"><ng-content /></div>\r\n@if (showsError()) {\r\n  <p class=\"hy-choice__error\">{{ errorMessage() }}</p>\r\n}\r\n",
+			styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+var HyRadio = class HyRadio {
+	group = inject(HyRadioGroup);
+	descriptionId = injectId("radio-desc");
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	checked = computed(() => this.group.value() === this.value(), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.group.disabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyRadio,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyRadio,
+		isStandalone: true,
+		selector: "hy-radio",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-checked": "checked() || null",
+				"attr.data-disabled": "isDisabled() || null"
+			},
+			classAttribute: "hy-choice hy-radio"
+		},
+		ngImport: i0,
+		template: "<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-radio__circle\">\r\n    <input\r\n      type=\"radio\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"group.groupName()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"group.value.set(value())\"\r\n      (blur)=\"group.touch.emit()\"\r\n    />\r\n    <span class=\"hy-radio__dot\" aria-hidden=\"true\"></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n",
+		styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyRadio,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-radio",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-choice hy-radio",
+				"[attr.data-checked]": "checked() || null",
+				"[attr.data-disabled]": "isDisabled() || null"
+			},
+			template: "<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-radio__circle\">\r\n    <input\r\n      type=\"radio\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"group.groupName()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"group.value.set(value())\"\r\n      (blur)=\"group.touch.emit()\"\r\n    />\r\n    <span class=\"hy-radio__dot\" aria-hidden=\"true\"></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n",
+			styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+const SLOP = 4;
+const PRESSED_THUMB = 1.5;
+var HySwitch = class HySwitch {
+	descriptionId = injectId("switch-desc");
+	drag = signal(null, ...ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []);
+	press = null;
+	landed = null;
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	onChange(event) {
+		this.checked.set(event.target.checked);
+	}
+	onDown(event) {
+		if (this.disabled() || event.button !== 0) return;
+		const track = event.currentTarget;
+		const rem = parseFloat(getComputedStyle(track.ownerDocument.documentElement).fontSize) || 16;
+		const travel = track.clientWidth - 4 - PRESSED_THUMB * rem;
+		this.press = {
+			x: event.clientX,
+			from: this.checked() ? travel : 0,
+			travel,
+			dir: getComputedStyle(track).direction === "rtl" ? -1 : 1,
+			pos: this.checked() ? travel : 0
+		};
+	}
+	onMove(event) {
+		const press = this.press;
+		if (!press) return;
+		const moved = (event.clientX - press.x) * press.dir;
+		if (this.drag() === null) {
+			if (Math.abs(moved) < SLOP) return;
+			try {
+				event.currentTarget.setPointerCapture(event.pointerId);
+			} catch {}
+		}
+		const raw = press.from + moved;
+		const over = raw < 0 ? raw : raw > press.travel ? raw - press.travel : 0;
+		press.pos = Math.min(Math.max(raw, 0), press.travel) + rubberband(over, press.travel);
+		this.drag.set(press.pos * press.dir);
+	}
+	onUp(cancelled = false) {
+		const press = this.press;
+		this.press = null;
+		if (!press || this.drag() === null) return;
+		this.drag.set(null);
+		const on = press.pos > press.travel / 2;
+		if (cancelled) {
+			this.checked.set(on);
+			return;
+		}
+		this.landed = on;
+		setTimeout(() => {
+			if (this.landed === null) return;
+			this.checked.set(this.landed);
+			this.landed = null;
+		});
+	}
+	onClick(event) {
+		if (this.landed === null) return;
+		event.preventDefault();
+		this.checked.set(this.landed);
+		this.landed = null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySwitch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HySwitch,
+		isStandalone: true,
+		selector: "hy-switch",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			touch: "touch"
+		},
+		host: {
+			properties: {
+				"attr.data-checked": "checked() || null",
+				"attr.data-disabled": "disabled() || null"
+			},
+			classAttribute: "hy-choice hy-switch"
+		},
+		ngImport: i0,
+		template: "<label class=\"hy-choice__row\">\r\n  <span\r\n    class=\"hy-choice__control hy-switch__track\"\r\n    (pointerdown)=\"onDown($event)\"\r\n    (pointermove)=\"onMove($event)\"\r\n    (pointerup)=\"onUp()\"\r\n    (pointercancel)=\"onUp(true)\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"onClick($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <span\r\n      class=\"hy-switch__thumb\"\r\n      aria-hidden=\"true\"\r\n      [attr.data-dragging]=\"drag() === null ? null : ''\"\r\n      [style.--_drag.px]=\"drag()\"\r\n    ></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n",
+		styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySwitch,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-switch",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-choice hy-switch",
+				"[attr.data-checked]": "checked() || null",
+				"[attr.data-disabled]": "disabled() || null"
+			},
+			template: "<label class=\"hy-choice__row\">\r\n  <span\r\n    class=\"hy-choice__control hy-switch__track\"\r\n    (pointerdown)=\"onDown($event)\"\r\n    (pointermove)=\"onMove($event)\"\r\n    (pointerup)=\"onUp()\"\r\n    (pointercancel)=\"onUp(true)\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"onClick($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <span\r\n      class=\"hy-switch__thumb\"\r\n      aria-hidden=\"true\"\r\n      [attr.data-dragging]=\"drag() === null ? null : ''\"\r\n      [style.--_drag.px]=\"drag()\"\r\n    ></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n",
+			styles: [":host{display:block}.hy-choice__row{display:inline-flex;align-items:flex-start;gap:var(--hy-space-3);min-block-size:1.5rem;color:var(--hy-ink);cursor:pointer}:host([data-disabled]) .hy-choice__row{opacity:.5;cursor:not-allowed}.hy-choice__control{position:relative;display:grid;place-items:center;flex:none;margin-block-start:.1em;transition:background-color var(--hy-dur-quick) var(--hy-ease-out),border-color var(--hy-dur-quick) var(--hy-ease-out),box-shadow var(--hy-dur-quick) var(--hy-ease-out)}.hy-choice__input{position:absolute;inset:-.25rem;margin:0;opacity:0;cursor:inherit}.hy-choice__control:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-choice__label{line-height:1.5}.hy-choice__description{margin:var(--hy-space-1) 0 0;padding-inline-start:calc(1.25rem + var(--hy-space-3));color:var(--hy-ink-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-checkbox__box{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:var(--hy-checkbox-radius, 6px);background:var(--hy-surface-1);color:var(--hy-primary-ink)}.hy-checkbox__mark{--hy-icon-size: .875rem;opacity:0;scale:.6;transition:opacity var(--hy-dur-quick) var(--hy-ease-out),scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-checkbox__box,:host([data-indeterminate]) .hy-checkbox__box{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-checkbox__mark,:host([data-indeterminate]) .hy-checkbox__mark{opacity:1;scale:1}:host([data-invalid]) .hy-checkbox__box{border-color:var(--hy-danger)}.hy-radio__circle{inline-size:1.25rem;block-size:1.25rem;border:1.5px solid var(--hy-line-strong);border-radius:50%;background:var(--hy-surface-1)}.hy-radio__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--hy-primary-ink);scale:0;transition:scale var(--hy-dur-settle) var(--hy-ease-spring)}:host([data-checked]) .hy-radio__circle{border-color:var(--hy-choice-checked, var(--hy-primary));background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-radio__dot{scale:1}:host(.hy-radio-group){display:flex;flex-direction:column;gap:var(--hy-space-3)}.hy-radio-group__label{font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small);font-weight:560}.hy-radio-group__items{display:flex;flex-direction:column;gap:var(--hy-space-3)}:host([data-orientation=\"horizontal\"]) .hy-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--hy-space-5)}.hy-choice__error{margin:0;color:var(--hy-danger);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}.hy-switch__track{inline-size:2.5rem;block-size:1.5rem;margin-block-start:0;padding:2px;place-items:center start;border-radius:var(--hy-radius-pill);background:var(--hy-switch-track, color-mix(in srgb, var(--hy-ink) 22%, transparent));box-shadow:inset 0 1px 2px #0f1a2426}.hy-switch__thumb{inline-size:1.25rem;block-size:1.25rem;border-radius:50%;background:var(--hy-glass-reflection),#fff;box-shadow:0 1px 3px #00000040,inset 0 0 0 .5px #0000000f;transition:translate var(--hy-dur-settle) var(--hy-ease-spring),inline-size var(--hy-dur-quick) var(--hy-ease-out)}:host([data-checked]) .hy-switch__track{background:var(--hy-choice-checked, var(--hy-primary))}:host([data-checked]) .hy-switch__thumb{translate:1rem 0}:host([data-checked]) .hy-switch__thumb:dir(rtl){translate:-1rem 0}:host(:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb,.hy-switch__thumb[data-dragging]{inline-size:1.5rem}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb{translate:.75rem 0}:host([data-checked]:not([data-disabled])) .hy-choice__row:active .hy-switch__thumb:dir(rtl){translate:-.75rem 0}.hy-switch__thumb[data-dragging],.hy-switch__thumb[data-dragging]:dir(rtl){translate:var(--_drag) 0;transition:inline-size var(--hy-dur-quick) var(--hy-ease-out)}@media(forced-colors:active){.hy-choice__control{border:1px solid CanvasText}:host([data-checked]) .hy-choice__control{background:Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { HyCheckbox, HyRadio, HyRadioGroup, HySwitch };
+
+//# sourceMappingURL=hyalo-angular-choice.mjs.map