@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-radio.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/radio/radio-group.token.ts","../../../../libs/angular-ui-kit/src/lib/radio/radio.component.ts","../../../../libs/angular-ui-kit/src/lib/radio/radio.component.html","../../../../libs/angular-ui-kit/src/lib/radio/radio-group.component.ts","../../../../libs/angular-ui-kit/src/lib/radio/radio-group.component.html"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\n/**\n * What an `lc-radio` inside an `lc-radio-group` reads from its group: the\n * shared name, the selected value and the group's states. Provided by\n * `RadioGroupComponent`; a radio without a group works on its own as before.\n */\nexport interface RadioGroupContext {\n  /** The `name` every radio of the group renders. */\n  readonly groupName: Signal<string>;\n  /** The selected value; `''` = none. */\n  readonly selectedValue: Signal<string>;\n  readonly groupDisabled: Signal<boolean>;\n  readonly groupRequired: Signal<boolean>;\n  readonly groupInvalid: Signal<boolean>;\n  /** Called by a radio the person selects. */\n  select(value: string): void;\n  /** Called when a radio loses focus (marks a bound form control touched). */\n  touch(): void;\n}\n\nexport const RADIO_GROUP = new InjectionToken<RadioGroupContext>('RADIO_GROUP');\n","import {\n  Component,\n  input,\n  model,\n  output,\n  signal,\n  computed,\n  effect,\n  untracked,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  DestroyRef,\n  ElementRef,\n  Injectable,\n  inject,\n  viewChild,\n  OnInit,\n  OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { RADIO_GROUP } from './radio-group.token';\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg';\n\nlet nextUniqueId = 0;\n\n/**\n * Tracks every live `lc-radio` so that checking one radio can uncheck the\n * others of its group. The browser does this natively (same `name`, same form\n * owner) without firing an event on the radios that lose the check, so their\n * component state would otherwise go stale.\n */\n@Injectable({ providedIn: 'root' })\nexport class RadioGroupRegistry {\n  private readonly radios = new Set<RadioComponent>();\n\n  add(radio: RadioComponent): void {\n    this.radios.add(radio);\n  }\n\n  remove(radio: RadioComponent): void {\n    this.radios.delete(radio);\n  }\n\n  /** Marks `source` as the checked radio of its group; siblings are unchecked. */\n  select(source: RadioComponent): void {\n    const name = source.effectiveName();\n    if (!name) return;\n    const form = source.formOwner();\n    for (const radio of this.radios) {\n      if (radio !== source && radio.effectiveName() === name && radio.formOwner() === form) {\n        radio.checked.set(false);\n      }\n    }\n  }\n}\n\n@Component({\n  selector: 'lc-radio',\n  standalone: true,\n  imports: [],\n  templateUrl: './radio.component.html',\n  styleUrl: './radio.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Radio button component for single-option selection within a group.\n *\n * Features:\n * - Single selection within a named radio group\n * - Multiple size variants (sm, md, lg)\n * - Validation error display with error message\n * - Help text support\n * - Full accessibility with ARIA attributes\n * - ControlValueAccessor integration for reactive forms\n * - Inside an `lc-radio-group`: name, selection, required, disabled and the\n *   invalid state come from the group (3.3)\n * - Size `lg` rows are 44 px high (touch target)\n *\n * @example\n * ```html\n * <lc-radio label=\"Option A\" value=\"a\" name=\"group1\" />\n * <lc-radio label=\"Option B\" value=\"b\" name=\"group1\" />\n * ```\n */\nexport class RadioComponent implements ControlValueAccessor, OnInit, OnDestroy {\n  // Inputs\n  readonly id = input<string>(`lc-radio-${nextUniqueId++}`);\n  readonly label = input<string>('');\n  readonly value = input<string>('');\n  readonly name = input<string>('');\n  readonly error = input<boolean>(false);\n  readonly errorMessage = input<string>('');\n  readonly helpText = input<string>('');\n  readonly size = input<RadioSize>('md');\n  readonly required = input<boolean>(false);\n  readonly disabled = input<boolean>(false);\n  readonly ariaLabel = input<string>('');\n  readonly ariaLabelledBy = input<string>('');\n  readonly ariaDescribedBy = input<string>('');\n\n  /**\n   * Checked state (two-way bindable). Emits `checkedChange` whenever it\n   * changes: on user selection, when a sibling of the same group is selected,\n   * and when a bound form control writes a value.\n   */\n  readonly checked = model<boolean>(false);\n\n  // Outputs\n  readonly valueChange = output<string>();\n\n  /** Disabled state pushed by a form control (`setDisabledState`). */\n  private readonly formDisabled = signal(false);\n\n  /** The `lc-radio-group` around this radio, if any. */\n  private readonly group = inject(RADIO_GROUP, { optional: true });\n\n  /** Effective disabled state: `disabled` input OR form control OR group disabled. */\n  readonly isDisabled = computed(() => this.disabled() || this.formDisabled() || !!this.group?.groupDisabled());\n\n  /** The rendered `name`: the group's inside an `lc-radio-group`, else `name`. */\n  readonly effectiveName = computed(() => this.group?.groupName() || this.name());\n\n  /** `required` here or on the group. */\n  readonly isRequired = computed(() => this.required() || !!this.group?.groupRequired());\n\n  /** Error state here or on the group. */\n  readonly isInvalid = computed(() => this.error() || !!this.group?.groupInvalid());\n\n  readonly labelClasses = computed(() => {\n    const classes = ['radio-label', `radio-${this.size()}`];\n\n    if (this.checked()) {\n      classes.push('radio-checked');\n    }\n\n    if (this.isDisabled()) {\n      classes.push('radio-disabled');\n    }\n\n    if (this.isInvalid()) {\n      classes.push('radio-error');\n    }\n\n    // Inside a group the asterisk belongs to the legend, not to every option.\n    if (this.required() && !this.group) {\n      classes.push('radio-required');\n    }\n\n    return classes.join(' ');\n  });\n\n  /** id of the rendered help text (only while it is shown). */\n  readonly helpTextId = computed(() =>\n    this.helpText() && !this.error() ? `${this.id()}-help` : null,\n  );\n\n  /** id of the rendered error message (only while it is shown). */\n  readonly errorMessageId = computed(() =>\n    this.error() && this.errorMessage() ? `${this.id()}-error` : null,\n  );\n\n  /** aria-describedby: consumer-supplied ids plus the rendered help/error text. */\n  readonly describedBy = computed(() => {\n    const ids = [this.ariaDescribedBy(), this.helpTextId(), this.errorMessageId()].filter(Boolean);\n    return ids.length ? ids.join(' ') : null;\n  });\n\n  // Private fields\n  private readonly cdr = inject(ChangeDetectorRef);\n  private readonly ngControl = inject(NgControl, { optional: true, self: true });\n  private readonly registry = inject(RadioGroupRegistry);\n  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('radioInput');\n  /**\n   * Last value written by a bound form control; `null` until a form has\n   * written once, so `[checked]` bindings on unbound radios are left alone.\n   */\n  private readonly formValue = signal<string | null>(null);\n  private valueChangeSub?: Subscription;\n\n  // Control Value Accessor callbacks\n  private onChange: (value: string) => void = () => undefined;\n  private onTouched: () => void = () => undefined;\n\n  constructor() {\n    // Prevent circular dependency by not providing NG_VALUE_ACCESSOR here\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n\n    this.registry.add(this);\n    inject(DestroyRef).onDestroy(() => this.registry.remove(this));\n\n    // Inside a group: checked exactly when the group's value equals this radio's value.\n    const group = this.group;\n    if (group) {\n      effect(() => {\n        const selected = group.selectedValue();\n        const v = this.value();\n        untracked(() => this.checked.set(selected !== '' && v !== '' && selected === v));\n      });\n    }\n\n    // A form-bound radio is checked exactly when the form value equals its own value.\n    effect(() => {\n      const fv = this.formValue();\n      const v = this.value();\n      if (fv === null) return;\n      untracked(() => this.checked.set(fv !== '' && v !== '' && fv === v));\n    });\n  }\n\n  ngOnInit(): void {\n    // Subscribe to form control value changes\n    if (this.ngControl?.control) {\n      this.valueChangeSub = this.ngControl.control.valueChanges.subscribe((value: string) => {\n        this.formValue.set(value || '');\n        this.cdr.markForCheck();\n      });\n      // Set initial value\n      const initialValue = this.ngControl.control.value as string;\n      if (initialValue) {\n        this.formValue.set(initialValue);\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.valueChangeSub?.unsubscribe();\n  }\n\n  /** Native form owner of the radio input; scopes the radio group like the browser does. */\n  formOwner(): HTMLFormElement | null {\n    return this.inputEl()?.nativeElement.form ?? null;\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string | null): void {\n    // The `checked` model follows formValue via the effect above\n    this.formValue.set(value || '');\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  // Event handlers\n  public handleChange(event: Event): void {\n    if (this.isDisabled()) {\n      event.preventDefault();\n      return;\n    }\n\n    // model.set() emits `checkedChange` once; siblings that the browser just\n    // unchecked natively are updated through the registry.\n    this.checked.set(true);\n    this.registry.select(this);\n    this.group?.select(this.value());\n\n    // Notify the form control - it will call writeValue on all radios\n    this.onChange(this.value());\n    this.valueChange.emit(this.value());\n  }\n\n  public handleBlur(): void {\n    this.onTouched();\n    this.group?.touch();\n  }\n}\n","<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n  <input\n    #radioInput\n    type=\"radio\"\n    [id]=\"id()\"\n    [name]=\"effectiveName()\"\n    [value]=\"value()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"isRequired()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-required]=\"isRequired() ? 'true' : null\"\n    [attr.aria-invalid]=\"isInvalid() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"radio\"\n    class=\"radio-input\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n  />\n  <span class=\"radio-circle\">\n    <span class=\"radio-dot\"></span>\n  </span>\n  @if (label()) {\n    <span class=\"radio-label-text\">{{ label() }}</span>\n  }\n</label>\n\n@if (helpTextId(); as helpId) {\n  <div [id]=\"helpId\" class=\"radio-help-text\">{{ helpText() }}</div>\n}\n\n@if (errorMessageId(); as errorId) {\n  <div [id]=\"errorId\" class=\"radio-error-message\">{{ errorMessage() }}</div>\n}\n","import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { RADIO_GROUP, RadioGroupContext } from './radio-group.token';\n\nlet nextUniqueId = 0;\n\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * A group of `lc-radio`s: a native `<fieldset>` named by its `<legend>`, with\n * group help text and one group error, both linked by `aria-describedby`. The\n * group gives every radio inside the same `name`, `required`, `disabled` and\n * invalid state, and holds the selected value (`[(value)]` or a form control on\n * the group).\n *\n * @example\n * ```html\n * <lc-radio-group legend=\"Sprache\" [legendHidden]=\"true\" [(value)]=\"locale\">\n *   <lc-radio value=\"device\" label=\"Wie dieses Gerät\" size=\"lg\" />\n *   <lc-radio value=\"en\" label=\"English\" size=\"lg\" lang=\"en\" />\n *   <lc-radio value=\"de\" label=\"Deutsch\" size=\"lg\" lang=\"de\" />\n * </lc-radio-group>\n * ```\n */\n@Component({\n  selector: 'lc-radio-group',\n  templateUrl: './radio-group.component.html',\n  styleUrl: './radio-group.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: RADIO_GROUP, useExisting: forwardRef(() => RadioGroupComponent) },\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },\n  ],\n})\nexport class RadioGroupComponent implements RadioGroupContext, ControlValueAccessor {\n  /** The group's question, rendered as the `<legend>` (its accessible name). */\n  readonly legend = input<string>('');\n\n  /** Hide the legend visually; screen readers still read it. */\n  readonly legendHidden = input<boolean>(false);\n\n  /** The `name` of every radio in the group. Unset = a generated one. */\n  readonly name = input<string>('');\n\n  /** Help for the whole group, below the legend. */\n  readonly helpText = input<string>('');\n\n  /** One error for the whole group, below the help text; marks every radio invalid. */\n  readonly error = input<string>('');\n\n  /** Every radio is `required`. */\n  readonly required = input<boolean>(false);\n\n  /** Show `*` after the legend of a required group. */\n  readonly requiredIndicator = input<boolean>(true);\n\n  /** Accessible name of the `*` marker. */\n  readonly requiredAriaLabel = input('required');\n\n  /** Disables every radio. */\n  readonly disabled = input<boolean>(false);\n\n  /** `vertical` (default) or `horizontal` (wraps). */\n  readonly orientation = input<RadioGroupOrientation>('vertical');\n\n  /** The selected value (two-way bindable); `''` = none. */\n  readonly value = model<string>('');\n\n  readonly groupId = `lc-radio-group-${nextUniqueId++}`;\n  readonly helpId = `${this.groupId}-help`;\n  readonly errorId = `${this.groupId}-error`;\n\n  private readonly formDisabled = signal(false);\n  private onChange: (value: string) => void = () => undefined;\n  private onTouched: () => void = () => undefined;\n\n  readonly groupName = computed(() => this.name() || this.groupId);\n  readonly selectedValue = computed(() => this.value());\n  readonly groupDisabled = computed(() => this.disabled() || this.formDisabled());\n  readonly groupRequired = computed(() => this.required());\n  readonly groupInvalid = computed(() => !!this.error());\n\n  protected readonly describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.helpText()) ids.push(this.helpId);\n    if (this.error()) ids.push(this.errorId);\n    return ids.length ? ids.join(' ') : null;\n  });\n\n  select(value: string): void {\n    if (this.groupDisabled()) return;\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  touch(): void {\n    this.onTouched();\n  }\n\n  writeValue(value: string | null | undefined): void {\n    this.value.set(value ?? '');\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n","<fieldset class=\"lc-radio-group\" [attr.aria-describedby]=\"describedBy()\" [disabled]=\"groupDisabled()\">\n  <legend class=\"lc-radio-group__legend\" [class.lc-radio-group__legend--hidden]=\"legendHidden()\">\n    {{ legend() }}\n    @if (required() && requiredIndicator()) {\n      <span class=\"lc-radio-group__required\" [attr.aria-label]=\"requiredAriaLabel()\">*</span>\n    }\n  </legend>\n\n  @if (helpText()) {\n    <p [id]=\"helpId\" class=\"lc-radio-group__help\">{{ helpText() }}</p>\n  }\n\n  @if (error()) {\n    <p [id]=\"errorId\" class=\"lc-radio-group__error\" role=\"alert\">{{ error() }}</p>\n  }\n\n  <div\n    class=\"lc-radio-group__options\"\n    [class.lc-radio-group__options--vertical]=\"orientation() === 'vertical'\"\n    [class.lc-radio-group__options--horizontal]=\"orientation() === 'horizontal'\"\n  >\n    <ng-content />\n  </div>\n</fieldset>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-rating.mjs

@@ -0,0 +1,327 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, output, signal, viewChildren } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var RatingComponent = class RatingComponent {
+	static nextId = 0;
+	max = input(5, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	allowHalf = input(false, ...ngDevMode ? [{ debugName: "allowHalf" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	showValue = input(false, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Rating", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ratingChange = output();
+	labelId = `lc-rating-${++RatingComponent.nextId}-label`;
+	value = signal(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	hoveredValue = signal(0, ...ngDevMode ? [{ debugName: "hoveredValue" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	interactive = computed(() => !this.readonly() && !this.isDisabled(), ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
+	starButtons = viewChildren("starBtn", ...ngDevMode ? [{ debugName: "starButtons" }] : /* istanbul ignore next */ []);
+	stars = computed(() => {
+		return Array.from({ length: this.max() }, (_, i) => i + 1);
+	}, ...ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []);
+	stepSize = computed(() => this.allowHalf() ? .5 : 1, ...ngDevMode ? [{ debugName: "stepSize" }] : /* istanbul ignore next */ []);
+	focusableStar = computed(() => Math.max(1, Math.ceil(this.value())), ...ngDevMode ? [{ debugName: "focusableStar" }] : /* istanbul ignore next */ []);
+	ratingClasses = computed(() => {
+		const classes = ["rating", `rating--${this.size()}`];
+		if (this.readonly()) classes.push("rating--readonly");
+		if (this.isDisabled()) classes.push("rating--disabled");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "ratingClasses" }] : /* istanbul ignore next */ []);
+	getStarState(star) {
+		const active = this.hoveredValue() || this.value();
+		if (star <= Math.floor(active)) return "full";
+		if (this.allowHalf() && star - .5 <= active) return "half";
+		return "empty";
+	}
+	isStarFilled(star) {
+		return this.getStarState(star) === "full";
+	}
+	isStarHalf(star) {
+		return this.getStarState(star) === "half";
+	}
+	isStarChecked(star) {
+		const val = this.value();
+		return val > 0 && Math.ceil(val) === star;
+	}
+	starLabel(star) {
+		const val = this.value();
+		return `${this.isStarChecked(star) && val !== star ? val : star} of ${this.max()} stars`;
+	}
+	valueAt(star, event) {
+		if (!this.allowHalf() || event.detail === 0) return star;
+		const el = event.currentTarget;
+		const rect = el.getBoundingClientRect();
+		if (!rect.width) return star;
+		const fromStart = event.clientX - rect.left;
+		return (getComputedStyle(el).direction === "rtl" ? fromStart > rect.width / 2 : fromStart < rect.width / 2) ? star - .5 : star;
+	}
+	onStarClick(star, event) {
+		if (!this.interactive()) return;
+		this.select(this.valueAt(star, event));
+		this.onTouched();
+	}
+	onStarHover(star, event) {
+		if (!this.interactive()) return;
+		this.hoveredValue.set(this.valueAt(star, event));
+	}
+	onMouseLeave() {
+		this.hoveredValue.set(0);
+	}
+	onKeydown(event) {
+		if (!this.interactive()) return;
+		const step = this.stepSize();
+		const cur = this.value();
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				next = Math.min(this.max(), cur + step);
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = Math.max(step, cur - step);
+				break;
+			case "Home":
+				next = step;
+				break;
+			case "End":
+				next = this.max();
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		this.select(next);
+		this.starButtons()[this.focusableStar() - 1]?.nativeElement.focus();
+	}
+	onFocusOut(event) {
+		const group = event.currentTarget;
+		if (event.relatedTarget instanceof Node && group.contains(event.relatedTarget)) return;
+		this.onTouched();
+	}
+	select(val) {
+		if (val === this.value()) return;
+		this.value.set(val);
+		this.ratingChange.emit(val);
+		this.onChange(val);
+	}
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(val) {
+		this.value.set(val ?? 0);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RatingComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RatingComponent,
+		isStandalone: true,
+		selector: "lc-rating",
+		inputs: {
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowHalf: {
+				classPropertyName: "allowHalf",
+				publicName: "allowHalf",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { ratingChange: "ratingChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => RatingComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "starButtons",
+			predicate: ["starBtn"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div [class]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n  @if (label()) {\n    <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n  }\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n  <div\n    class=\"rating__stars\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel()\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    (keydown)=\"onKeydown($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    @for (star of stars(); track star) {\n      <button\n        #starBtn\n        type=\"button\"\n        class=\"rating__star\"\n        role=\"radio\"\n        [class.rating__star--filled]=\"isStarFilled(star)\"\n        [class.rating__star--half]=\"isStarHalf(star)\"\n        [disabled]=\"isDisabled()\"\n        [tabindex]=\"star === focusableStar() ? 0 : -1\"\n        [attr.aria-checked]=\"isStarChecked(star)\"\n        [attr.aria-label]=\"starLabel(star)\"\n        (click)=\"onStarClick(star, $event)\"\n        (mousemove)=\"onStarHover(star, $event)\"\n      >\n        @if (isStarFilled(star)) {\n          <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n        } @else if (isStarHalf(star)) {\n          <span class=\"rating__icon rating__icon--half\">\n            <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n            <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n          </span>\n        } @else {\n          <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n        }\n      </button>\n    }\n  </div>\n  @if (showValue()) {\n    <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n  }\n</div>\n",
+		styles: [".rating{display:inline-flex;align-items:center;gap:.5rem}.rating__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.rating__stars{display:inline-flex;align-items:center;gap:.125rem}.rating__star{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:.125rem;cursor:pointer;border-radius:.25rem;transition:transform .15s ease}.rating__star:hover:not(:disabled){transform:scale(1.15)}.rating__star:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.rating__star:disabled{cursor:default}.rating__icon{transition:color .15s ease}.rating__icon--filled{color:var(--color-warning)}.rating__icon--half{position:relative;display:inline-flex;color:var(--color-border-strong)}.rating__icon--empty{color:var(--color-border-strong)}.rating__icon-fill{position:absolute;inset:0;color:var(--color-warning);clip-path:inset(0 50% 0 0)}:host-context([dir=rtl]) .rating__icon-fill{clip-path:inset(0 0 0 50%)}.rating__value{font-size:var(--typography-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.rating--sm .rating__star{padding:.0625rem}.rating--lg .rating__star{padding:.1875rem}.rating--lg .rating__value{font-size:var(--typography-font-size-base, 1rem)}.rating--readonly .rating__star{cursor:default}.rating--readonly .rating__star:hover{transform:none}.rating--disabled{opacity:.5;pointer-events:none}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RatingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-rating",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RatingComponent),
+				multi: true
+			}],
+			template: "<div [class]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n  @if (label()) {\n    <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n  }\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n  <div\n    class=\"rating__stars\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel()\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    (keydown)=\"onKeydown($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    @for (star of stars(); track star) {\n      <button\n        #starBtn\n        type=\"button\"\n        class=\"rating__star\"\n        role=\"radio\"\n        [class.rating__star--filled]=\"isStarFilled(star)\"\n        [class.rating__star--half]=\"isStarHalf(star)\"\n        [disabled]=\"isDisabled()\"\n        [tabindex]=\"star === focusableStar() ? 0 : -1\"\n        [attr.aria-checked]=\"isStarChecked(star)\"\n        [attr.aria-label]=\"starLabel(star)\"\n        (click)=\"onStarClick(star, $event)\"\n        (mousemove)=\"onStarHover(star, $event)\"\n      >\n        @if (isStarFilled(star)) {\n          <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n        } @else if (isStarHalf(star)) {\n          <span class=\"rating__icon rating__icon--half\">\n            <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n            <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n          </span>\n        } @else {\n          <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n        }\n      </button>\n    }\n  </div>\n  @if (showValue()) {\n    <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n  }\n</div>\n",
+			styles: [".rating{display:inline-flex;align-items:center;gap:.5rem}.rating__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.rating__stars{display:inline-flex;align-items:center;gap:.125rem}.rating__star{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:.125rem;cursor:pointer;border-radius:.25rem;transition:transform .15s ease}.rating__star:hover:not(:disabled){transform:scale(1.15)}.rating__star:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.rating__star:disabled{cursor:default}.rating__icon{transition:color .15s ease}.rating__icon--filled{color:var(--color-warning)}.rating__icon--half{position:relative;display:inline-flex;color:var(--color-border-strong)}.rating__icon--empty{color:var(--color-border-strong)}.rating__icon-fill{position:absolute;inset:0;color:var(--color-warning);clip-path:inset(0 50% 0 0)}:host-context([dir=rtl]) .rating__icon-fill{clip-path:inset(0 0 0 50%)}.rating__value{font-size:var(--typography-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.rating--sm .rating__star{padding:.0625rem}.rating--lg .rating__star{padding:.1875rem}.rating--lg .rating__value{font-size:var(--typography-font-size-base, 1rem)}.rating--readonly .rating__star{cursor:default}.rating--readonly .rating__star:hover{transform:none}.rating--disabled{opacity:.5;pointer-events:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		allowHalf: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowHalf",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ratingChange: [{
+			type: i0.Output,
+			args: ["ratingChange"]
+		}],
+		starButtons: [{
+			type: i0.ViewChildren,
+			args: ["starBtn", { isSignal: true }]
+		}]
+	}
+});
+export { RatingComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-rating.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-rating.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/rating/rating.component.ts","../../../../libs/angular-ui-kit/src/lib/rating/rating.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  computed,\n  signal,\n  forwardRef,\n  viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type RatingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-rating',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './rating.component.html',\n  styleUrls: ['./rating.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => RatingComponent),\n      multi: true,\n    },\n  ],\n})\n/**\n * Rating component for star-based value selection.\n *\n * Features:\n * - Configurable maximum star count\n * - Half-star rating support (click the left half of a star, or step with the arrow keys)\n * - Multiple size variants (sm, md, lg)\n * - Read-only and disabled states\n * - Hover preview with visual feedback\n * - Keyboard: Arrow keys step the value, Home/End jump to the ends\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-rating [max]=\"5\" [allowHalf]=\"true\" label=\"Rate this\" />\n * ```\n */\nexport class RatingComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Maximum number of stars */\n  max = input<number>(5);\n\n  /** Size variant */\n  size = input<RatingSize>('md');\n\n  /** Whether the rating is read-only */\n  readonly = input<boolean>(false);\n\n  /** Whether the rating is disabled */\n  disabled = input<boolean>(false);\n\n  /** Whether to allow half-star ratings */\n  allowHalf = input<boolean>(false);\n\n  /** Label text */\n  label = input<string>();\n\n  /** Whether to show the numeric value */\n  showValue = input<boolean>(false);\n\n  /** Accessible name of the star group when no visible `label` is set. */\n  ariaLabel = input('Rating');\n\n  /** Emits the selected rating */\n  ratingChange = output<number>();\n\n  /** Per-instance id naming the radiogroup by the visible label. */\n  protected readonly labelId = `lc-rating-${++RatingComponent.nextId}-label`;\n\n  protected value = signal(0);\n  protected hoveredValue = signal(0);\n\n  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n  private readonly formDisabled = signal(false);\n\n  /** Disabled by either route — the one flag the template consults. */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  /** Whether clicks and keys change the value. Read-only stays focusable, it just does not react. */\n  protected readonly interactive = computed(() => !this.readonly() && !this.isDisabled());\n\n  private readonly starButtons = viewChildren<ElementRef<HTMLButtonElement>>('starBtn');\n\n  protected stars = computed(() => {\n    return Array.from({ length: this.max() }, (_, i) => i + 1);\n  });\n\n  /** Smallest change the value can make. */\n  private readonly stepSize = computed(() => (this.allowHalf() ? 0.5 : 1));\n\n  /**\n   * The star that carries the group's single tab stop (roving tabindex): the\n   * one holding the current value, or the first when nothing is selected.\n   */\n  protected readonly focusableStar = computed(() => Math.max(1, Math.ceil(this.value())));\n\n  protected ratingClasses = computed(() => {\n    const classes = ['rating', `rating--${this.size()}`];\n    if (this.readonly()) classes.push('rating--readonly');\n    if (this.isDisabled()) classes.push('rating--disabled');\n    return classes.join(' ');\n  });\n\n  protected getStarState(star: number): 'full' | 'half' | 'empty' {\n    const active = this.hoveredValue() || this.value();\n    if (star <= Math.floor(active)) return 'full';\n    if (this.allowHalf() && star - 0.5 <= active) return 'half';\n    return 'empty';\n  }\n\n  protected isStarFilled(star: number): boolean {\n    return this.getStarState(star) === 'full';\n  }\n\n  protected isStarHalf(star: number): boolean {\n    return this.getStarState(star) === 'half';\n  }\n\n  /** `aria-checked` for the radio that represents the current value (2.5 lives on star 3). */\n  protected isStarChecked(star: number): boolean {\n    const val = this.value();\n    return val > 0 && Math.ceil(val) === star;\n  }\n\n  /** Radio label — names the half value on the star that holds it. */\n  protected starLabel(star: number): string {\n    const val = this.value();\n    const shown = this.isStarChecked(star) && val !== star ? val : star;\n    return `${shown} of ${this.max()} stars`;\n  }\n\n  /**\n   * The value a pointer at `clientX` over `star` stands for: the left half of\n   * a star (right half in RTL) is the half step when halves are allowed.\n   * Keyboard-triggered clicks carry no coordinates and mean the whole star.\n   */\n  private valueAt(star: number, event: MouseEvent): number {\n    if (!this.allowHalf() || event.detail === 0) return star;\n    const el = event.currentTarget as HTMLElement;\n    const rect = el.getBoundingClientRect();\n    if (!rect.width) return star;\n    const fromStart = event.clientX - rect.left;\n    const rtl = getComputedStyle(el).direction === 'rtl';\n    const inFirstHalf = rtl ? fromStart > rect.width / 2 : fromStart < rect.width / 2;\n    return inFirstHalf ? star - 0.5 : star;\n  }\n\n  protected onStarClick(star: number, event: MouseEvent): void {\n    if (!this.interactive()) return;\n    this.select(this.valueAt(star, event));\n    this.onTouched();\n  }\n\n  protected onStarHover(star: number, event: MouseEvent): void {\n    if (!this.interactive()) return;\n    this.hoveredValue.set(this.valueAt(star, event));\n  }\n\n  protected onMouseLeave(): void {\n    this.hoveredValue.set(0);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    const step = this.stepSize();\n    const cur = this.value();\n    let next: number;\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = Math.min(this.max(), cur + step);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = Math.max(step, cur - step);\n        break;\n      case 'Home':\n        next = step;\n        break;\n      case 'End':\n        next = this.max();\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.select(next);\n    // Roving tabindex: focus follows the checked star.\n    this.starButtons()[this.focusableStar() - 1]?.nativeElement.focus();\n  }\n\n  /** Marks the control touched once focus leaves the group (not when it moves between stars). */\n  protected onFocusOut(event: FocusEvent): void {\n    const group = event.currentTarget as HTMLElement;\n    if (event.relatedTarget instanceof Node && group.contains(event.relatedTarget)) return;\n    this.onTouched();\n  }\n\n  private select(val: number): void {\n    if (val === this.value()) return;\n    this.value.set(val);\n    this.ratingChange.emit(val);\n    this.onChange(val);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (val: number) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  writeValue(val: number): void {\n    this.value.set(val ?? 0);\n  }\n\n  registerOnChange(fn: (val: number) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n","<div [class]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n  @if (label()) {\n    <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n  }\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n  <div\n    class=\"rating__stars\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel()\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    (keydown)=\"onKeydown($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    @for (star of stars(); track star) {\n      <button\n        #starBtn\n        type=\"button\"\n        class=\"rating__star\"\n        role=\"radio\"\n        [class.rating__star--filled]=\"isStarFilled(star)\"\n        [class.rating__star--half]=\"isStarHalf(star)\"\n        [disabled]=\"isDisabled()\"\n        [tabindex]=\"star === focusableStar() ? 0 : -1\"\n        [attr.aria-checked]=\"isStarChecked(star)\"\n        [attr.aria-label]=\"starLabel(star)\"\n        (click)=\"onStarClick(star, $event)\"\n        (mousemove)=\"onStarHover(star, $event)\"\n      >\n        @if (isStarFilled(star)) {\n          <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n        } @else if (isStarHalf(star)) {\n          <span class=\"rating__icon rating__icon--half\">\n            <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n            <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n          </span>\n        } @else {\n          <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n        }\n      </button>\n    }\n  </div>\n  @if (showValue()) {\n    <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n  }\n</div>\n"],"mappings":"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"}