@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-radio.mjs

@@ -0,0 +1,411 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, inject, input, model, output } from "@angular/core";
+var StarRadioGroup = class StarRadioGroup {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* 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
+	});
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = input(null, ...ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	touch = output();
+	fallbackName = inject(_IdGenerator).getId("star-radio-group-");
+	groupName = computed(() => this.name() || this.fallbackName, ...ngDevMode ? [{ debugName: "groupName" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.invalid() && this.touched(), ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	isSelected(value) {
+		return Object.is(this.value(), value);
+	}
+	select(value) {
+		if (this.disabled() || this.readonly()) return;
+		this.value.set(value);
+	}
+	focus(options) {
+		const inputs = [...this.host.nativeElement.querySelectorAll("input[type=radio]")];
+		(inputs.find((radio) => radio.checked) ?? inputs.find((radio) => !radio.disabled))?.focus(options);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarRadioGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarRadioGroup,
+		isStandalone: true,
+		selector: "star-radio-group",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				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
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			attributes: { "role": "radiogroup" },
+			properties: {
+				"class.star-radio-group--horizontal": "orientation() === 'horizontal'",
+				"attr.aria-label": "ariaLabel()",
+				"attr.aria-labelledby": "ariaLabelledBy()",
+				"attr.aria-required": "required() || null",
+				"attr.aria-invalid": "showInvalid() || null",
+				"attr.aria-disabled": "disabled() || null"
+			},
+			classAttribute: "star-radio-group"
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarRadioGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-radio-group",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-radio-group",
+				role: "radiogroup",
+				"[class.star-radio-group--horizontal]": "orientation() === 'horizontal'",
+				"[attr.aria-label]": "ariaLabel()",
+				"[attr.aria-labelledby]": "ariaLabelledBy()",
+				"[attr.aria-required]": "required() || null",
+				"[attr.aria-invalid]": "showInvalid() || null",
+				"[attr.aria-disabled]": "disabled() || null"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				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
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+var StarRadio = class StarRadio {
+	group = inject(StarRadioGroup);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	inputId = input(inject(_IdGenerator).getId("star-radio-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	checked = computed(() => this.group.isSelected(this.value()), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.group.disabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange(radio) {
+		if (this.group.readonly()) {
+			radio.checked = this.checked();
+			return;
+		}
+		if (radio.checked) this.group.select(this.value());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarRadio,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarRadio,
+		isStandalone: true,
+		selector: "star-radio",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "class.star-radio--disabled": "isDisabled()" },
+			classAttribute: "star-radio"
+		},
+		ngImport: i0,
+		template: `
+    <label class="star-radio__label">
+      <input
+        #radio
+        type="radio"
+        class="star-radio__input"
+        [id]="inputId()"
+        [name]="group.groupName()"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [required]="group.required()"
+        (change)="onChange(radio)"
+        (blur)="group.touch.emit()"
+      />
+      <span class="star-radio__dot" aria-hidden="true"></span>
+      <span class="star-radio__text"><ng-content /></span>
+    </label>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarRadio,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-radio",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-radio",
+				"[class.star-radio--disabled]": "isDisabled()"
+			},
+			template: `
+    <label class="star-radio__label">
+      <input
+        #radio
+        type="radio"
+        class="star-radio__input"
+        [id]="inputId()"
+        [name]="group.groupName()"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [required]="group.required()"
+        (change)="onChange(radio)"
+        (blur)="group.touch.emit()"
+      />
+      <span class="star-radio__dot" aria-hidden="true"></span>
+      <span class="star-radio__text"><ng-content /></span>
+    </label>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}]
+	}
+});
+export { StarRadio, StarRadioGroup };
+
+//# sourceMappingURL=star-ng-ui-radio.mjs.map

package/fesm2022/star-ng-ui-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-radio.mjs","names":[],"sources":["../../../projects/star-ng/radio/radio.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\n/**\n * Radio group (PrimeNG `p-radiobutton` used as a group). The group owns the value; each\n * `star-radio` is a native radio input, so arrow keys move and select natively.\n *\n * ```html\n * <star-radio-group [formField]=\"form.priority\" ariaLabel=\"Priority\">\n *   <star-radio value=\"low\">Low</star-radio>\n *   <star-radio value=\"high\">High</star-radio>\n * </star-radio-group>\n * ```\n */\n@Component({\n  selector: 'star-radio-group',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-radio-group',\n    role: 'radiogroup',\n    '[class.star-radio-group--horizontal]': \"orientation() === 'horizontal'\",\n    '[attr.aria-label]': 'ariaLabel()',\n    '[attr.aria-labelledby]': 'ariaLabelledBy()',\n    '[attr.aria-required]': 'required() || null',\n    '[attr.aria-invalid]': 'showInvalid() || null',\n    '[attr.aria-disabled]': 'disabled() || null',\n  },\n  template: `<ng-content />`,\n})\nexport class StarRadioGroup<T = unknown> implements FormValueControl<T | null> {\n  readonly value = model<T | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly touched = input(false, { transform: booleanAttribute });\n  readonly name = input('');\n  readonly orientation = input<'vertical' | 'horizontal'>('vertical');\n  readonly ariaLabel = input<string | null>(null);\n  readonly ariaLabelledBy = input<string | null>(null);\n\n  readonly touch = output<void>();\n\n  private readonly fallbackName = inject(_IdGenerator).getId('star-radio-group-');\n  readonly groupName = computed(() => this.name() || this.fallbackName);\n  protected readonly showInvalid = computed(() => this.invalid() && this.touched());\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  isSelected(value: T): boolean {\n    return Object.is(this.value(), value);\n  }\n\n  select(value: T): void {\n    if (this.disabled() || this.readonly()) return;\n    this.value.set(value);\n  }\n\n  focus(options?: FocusOptions): void {\n    const inputs = [\n      ...this.host.nativeElement.querySelectorAll<HTMLInputElement>('input[type=radio]'),\n    ];\n    (inputs.find((radio) => radio.checked) ?? inputs.find((radio) => !radio.disabled))?.focus(\n      options,\n    );\n  }\n}\n\n@Component({\n  selector: 'star-radio',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-radio',\n    '[class.star-radio--disabled]': 'isDisabled()',\n  },\n  template: `\n    <label class=\"star-radio__label\">\n      <input\n        #radio\n        type=\"radio\"\n        class=\"star-radio__input\"\n        [id]=\"inputId()\"\n        [name]=\"group.groupName()\"\n        [checked]=\"checked()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"group.required()\"\n        (change)=\"onChange(radio)\"\n        (blur)=\"group.touch.emit()\"\n      />\n      <span class=\"star-radio__dot\" aria-hidden=\"true\"></span>\n      <span class=\"star-radio__text\"><ng-content /></span>\n    </label>\n  `,\n})\nexport class StarRadio<T = unknown> {\n  protected readonly group = inject<StarRadioGroup<T>>(StarRadioGroup);\n\n  readonly value = input.required<T>();\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly inputId = input(inject(_IdGenerator).getId('star-radio-'));\n\n  protected readonly checked = computed(() => this.group.isSelected(this.value()));\n  protected readonly isDisabled = computed(() => this.disabled() || this.group.disabled());\n\n  protected onChange(radio: HTMLInputElement): void {\n    if (this.group.readonly()) {\n      radio.checked = this.checked();\n      return;\n    }\n    if (radio.checked) this.group.select(this.value());\n  }\n}\n"],"mappings":"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"}

package/fesm2022/star-ng-ui-rating.mjs

@@ -0,0 +1,211 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output, signal } from "@angular/core";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+var StarRating = class StarRating {
+	text = inject(STAR_UI_TEXT);
+	groupName = inject(_IdGenerator).getId("star-rating-");
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	count = input(5, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	hover = signal(null, ...ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []);
+	stars = computed(() => Array.from({ length: this.count() }, (_, i) => i + 1), ...ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []);
+	shown = computed(() => this.hover() ?? this.value() ?? 0, ...ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []);
+	choose(star) {
+		if (this.disabled() || this.readonly()) return;
+		this.value.set(star);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarRating,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarRating,
+		isStandalone: true,
+		selector: "star-rating",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			attributes: { "role": "radiogroup" },
+			listeners: { "mouseleave": "hover.set(null)" },
+			properties: {
+				"attr.aria-label": "ariaLabel() ?? text.ratingLabel",
+				"class.star-rating--readonly": "readonly() || disabled()"
+			},
+			classAttribute: "star-rating"
+		},
+		ngImport: i0,
+		template: `
+    @for (star of stars(); track star) {
+      <label
+        class="star-rating__star"
+        [class.star-rating__star--on]="star <= shown()"
+        (mouseenter)="!readonly() && hover.set(star)"
+      >
+        <input
+          type="radio"
+          class="star-sr-only"
+          [name]="groupName"
+          [value]="star"
+          [checked]="value() === star"
+          [disabled]="disabled() || readonly()"
+          [attr.aria-label]="text.ofTotal(star, stars().length)"
+          (click)="choose(star)"
+          (blur)="touch.emit()"
+        />
+        <i class="ph-fill ph-star" aria-hidden="true"></i>
+      </label>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarRating,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-rating",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-rating",
+				role: "radiogroup",
+				"[attr.aria-label]": "ariaLabel() ?? text.ratingLabel",
+				"[class.star-rating--readonly]": "readonly() || disabled()",
+				"(mouseleave)": "hover.set(null)"
+			},
+			template: `
+    @for (star of stars(); track star) {
+      <label
+        class="star-rating__star"
+        [class.star-rating__star--on]="star <= shown()"
+        (mouseenter)="!readonly() && hover.set(star)"
+      >
+        <input
+          type="radio"
+          class="star-sr-only"
+          [name]="groupName"
+          [value]="star"
+          [checked]="value() === star"
+          [disabled]="disabled() || readonly()"
+          [attr.aria-label]="text.ofTotal(star, stars().length)"
+          (click)="choose(star)"
+          (blur)="touch.emit()"
+        />
+        <i class="ph-fill ph-star" aria-hidden="true"></i>
+      </label>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { StarRating };
+
+//# sourceMappingURL=star-ng-ui-rating.mjs.map

package/fesm2022/star-ng-ui-rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-rating.mjs","names":[],"sources":["../../../projects/star-ng/rating/rating.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { STAR_UI_TEXT } from '@star-ng/ui/core';\n\n/**\n * Star rating (PrimeNG `p-rating`) as a native radio group: Arrow keys change the rating,\n * screen readers announce \"3 of 5 stars\". Hover previews the rating.\n * `<star-rating [(value)]=\"quality\" ariaLabel=\"Response quality\" />`\n */\n@Component({\n  selector: 'star-rating',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-rating',\n    role: 'radiogroup',\n    '[attr.aria-label]': 'ariaLabel() ?? text.ratingLabel',\n    '[class.star-rating--readonly]': 'readonly() || disabled()',\n    '(mouseleave)': 'hover.set(null)',\n  },\n  template: `\n    @for (star of stars(); track star) {\n      <label\n        class=\"star-rating__star\"\n        [class.star-rating__star--on]=\"star <= shown()\"\n        (mouseenter)=\"!readonly() && hover.set(star)\"\n      >\n        <input\n          type=\"radio\"\n          class=\"star-sr-only\"\n          [name]=\"groupName\"\n          [value]=\"star\"\n          [checked]=\"value() === star\"\n          [disabled]=\"disabled() || readonly()\"\n          [attr.aria-label]=\"text.ofTotal(star, stars().length)\"\n          (click)=\"choose(star)\"\n          (blur)=\"touch.emit()\"\n        />\n        <i class=\"ph-fill ph-star\" aria-hidden=\"true\"></i>\n      </label>\n    }\n  `,\n})\nexport class StarRating implements FormValueControl<number | null> {\n  protected readonly text = inject(STAR_UI_TEXT);\n  protected readonly groupName = inject(_IdGenerator).getId('star-rating-');\n  readonly value = model<number | null>(null);\n  readonly count = input(5);\n  readonly ariaLabel = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly touch = output<void>();\n\n  protected readonly hover = signal<number | null>(null);\n  protected readonly stars = computed(() => Array.from({ length: this.count() }, (_, i) => i + 1));\n  protected readonly shown = computed(() => this.hover() ?? this.value() ?? 0);\n\n  protected choose(star: number): void {\n    if (this.disabled() || this.readonly()) return;\n    this.value.set(star);\n  }\n}\n"],"mappings":";;;;AAqDA,IAAa,aAAb,MAAa,WAAU;CACF,OAAO,OAAO,YAAY;CAC1B,YAAY,OAAO,YAAY,CAAC,CAAC,MAAM,cAAc;CAC/D,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,QAAQ,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChB,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,QAAQ,OAAM;CAEJ,QAAQ,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,QAAQ,eAAe,MAAM,KAAK,EAAE,QAAQ,KAAK,MAAK,EAAE,IAAK,GAAG,MAAM,IAAI,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC7E,QAAQ,eAAe,KAAK,MAAK,KAAM,KAAK,MAAK,KAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAElE,OAAO,MAAY;EAC3B,IAAI,KAAK,SAAQ,KAAM,KAAK,SAAQ,GAAI;EACxC,KAAK,MAAM,IAAI,IAAI;CACrB;CAjBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,OAAA;GAAA,OAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,aAAA;GAAA,WAAA,EAAA,cAAA,kBAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,+BAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAvBX;;;;;;;;;;;;;;;;;;;;;;EAqBT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAjCtB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,OAAO;IACP,MAAM;IACN,qBAAqB;IACrB,iCAAiC;IACjC,gBAAgB;GACjB;GACD,UAAU;;;;;;;;;;;;;;;;;;;;;;EAsBX,CAAA"}