@nanahoshi/mona-ui 0.11.3 → 0.12.0

package/fesm2022/nanahoshi-mona-ui-rating.mjs

@@ -0,0 +1,606 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, computed, viewChild, contentChild, signal, input, output, model, Component } from '@angular/core';
+import { LucideStar, LucideHeart, LucideFlame, LucideDiamond, LucideCircle, LucideDynamicIcon } from '@lucide/angular';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { range } from '@mirei/ts-collections';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+/**
+ * @description Renders the pointer-preview visual for rating items. Overrides the default preset
+ * overlay whenever the visible state comes from pointer preview.
+ */
+class RatingHoveredItemTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingHoveredItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: RatingHoveredItemTemplateDirective, isStandalone: true, selector: "ng-template[monaRatingHoveredItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingHoveredItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaRatingHoveredItemTemplate]"
+                }]
+        }] });
+
+/**
+ * @description Renders the default (unselected) visual for every rating item. Overrides the
+ * default preset icon for the base layer of each item.
+ */
+class RatingItemTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: RatingItemTemplateDirective, isStandalone: true, selector: "ng-template[monaRatingItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaRatingItemTemplate]"
+                }]
+        }] });
+
+/**
+ * @description Renders the committed selected visual for rating items. Overrides the default
+ * preset overlay whenever the visible state comes from the committed value.
+ */
+class RatingSelectedItemTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingSelectedItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: RatingSelectedItemTemplateDirective, isStandalone: true, selector: "ng-template[monaRatingSelectedItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingSelectedItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaRatingSelectedItemTemplate]"
+                }]
+        }] });
+
+const ratingContainerThemeVariants = cva(`inline-flex items-center gap-2.5`);
+const ratingControlThemeVariants = cva(`
+        group
+        inline-flex items-center
+        cursor-pointer select-none
+        rounded-md
+        outline-none
+        transition-colors duration-(--mona-motion-fast)
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+        data-[disabled="true"]:pointer-events-none
+        data-[disabled="true"]:cursor-not-allowed
+        data-[readonly="true"]:cursor-default
+        data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/35
+        data-[invalid="true"]:focus-visible:ring-error/35
+    `, {
+    variants: {
+        size: {
+            small: "gap-1 p-0.5",
+            medium: "gap-1 p-1",
+            large: "gap-1.5 p-1.5"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingItemThemeVariants = cva(`relative flex items-center justify-center overflow-hidden`, {
+    variants: {
+        size: {
+            small: "h-6 w-6",
+            medium: "h-7 w-7",
+            large: "h-8 w-8"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingIconThemeVariants = cva(`
+        block shrink-0
+        text-muted-foreground opacity-45
+        transition-colors duration-(--mona-motion-fast)
+        group-data-[disabled="true"]:text-disabled-foreground
+    `, {
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-5 w-5",
+            large: "h-6 w-6"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingOverlayIconThemeVariants = cva(`block shrink-0`, {
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-5 w-5",
+            large: "h-6 w-6"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingOverlayClipThemeVariants = cva(`
+    absolute bottom-0 start-0 top-0
+    pointer-events-none
+    overflow-hidden
+`);
+const ratingOverlayContentThemeVariants = cva(`
+        flex items-center justify-center
+        transition-colors duration-(--mona-motion-fast)
+        group-data-[disabled="true"]:text-disabled-foreground
+    `, {
+    variants: {
+        size: {
+            small: "h-6 w-6",
+            medium: "h-7 w-7",
+            large: "h-8 w-8"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const ratingLabelThemeVariants = cva(`whitespace-nowrap`, {
+    variants: {
+        size: {
+            small: "text-sm",
+            medium: "text-sm",
+            large: "text-base"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+
+const DEFAULT_ITEMS_COUNT = 5;
+/**
+ * Normalizes an arbitrary `itemsCount` value into a safe positive integer.
+ * Numeric strings are converted, fractional values are floored, and
+ * non-finite values fall back to the default.
+ */
+function normalizeItemsCount(value) {
+    if (typeof value === "string") {
+        if (value.trim() === "") {
+            return DEFAULT_ITEMS_COUNT;
+        }
+        value = Number(value);
+    }
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return DEFAULT_ITEMS_COUNT;
+    }
+    return Math.max(1, Math.floor(value));
+}
+/**
+ * Returns the interaction step for the given precision.
+ */
+function getRatingStep(precision) {
+    return precision === "half" ? 0.5 : 1;
+}
+/**
+ * Rounds a value to the nearest multiple of the given step while avoiding
+ * floating-point drift. The result is constrained to one decimal place.
+ */
+function normalizeToStep(value, step) {
+    const normalized = Math.round((value + Number.EPSILON) / step) * step;
+    return Number(normalized.toFixed(1));
+}
+/**
+ * Normalizes an externally supplied value for rendering and interaction.
+ * Non-finite values become `0`, out-of-range values are clamped to the
+ * valid domain, and the result is snapped to the active precision step.
+ */
+function normalizeRatingValue(value, itemsCount, precision) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return 0;
+    }
+    const clamped = Math.max(0, Math.min(itemsCount, value));
+    return Math.max(0, Math.min(itemsCount, normalizeToStep(clamped, getRatingStep(precision))));
+}
+/**
+ * Fill amount for one item in continuous selection mode: every item at or
+ * below the display value fills fully, one boundary item fills partially.
+ */
+function getContinuousItemFill(displayValue, itemValue) {
+    return Math.max(0, Math.min(1, displayValue - (itemValue - 1)));
+}
+/**
+ * Fill amount for one item in single selection mode: only the item
+ * representing the display value fills, possibly partially.
+ */
+function getSingleItemFill(displayValue, itemValue) {
+    if (displayValue === 0) {
+        return 0;
+    }
+    const activeItem = Math.ceil(displayValue);
+    if (itemValue !== activeItem) {
+        return 0;
+    }
+    return Math.max(0, Math.min(1, displayValue - (itemValue - 1)));
+}
+/**
+ * Converts a pointer position inside an item into a candidate rating value.
+ * Whole-item precision always selects the full item; half precision splits
+ * the item into two horizontal regions, honoring the effective text
+ * direction so the first visual half maps to the lower value.
+ */
+function getPointerRatingValue(args) {
+    const { clientX, direction, itemRect, itemValue, precision } = args;
+    if (precision === "item") {
+        return itemValue;
+    }
+    let ratio = (clientX - itemRect.left) / itemRect.width;
+    if (direction === "rtl") {
+        ratio = 1 - ratio;
+    }
+    return ratio <= 0.5 ? itemValue - 0.5 : itemValue;
+}
+
+const ratingIcons = {
+    circle: LucideCircle,
+    diamond: LucideDiamond,
+    flame: LucideFlame,
+    heart: LucideHeart,
+    star: LucideStar
+};
+class RatingComponent {
+    constructor() {
+        this.activeState = computed(() => this.previewActive() ? "hovered" : "selected", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
+        this.containerClasses = computed(() => twMerge(ratingContainerThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        this.controlClasses = computed(() => ratingControlThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlClasses" }] : /* istanbul ignore next */ []));
+        this.controlElement = viewChild.required("ratingControl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlElement" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => this.previewValue() ?? this.normalizedValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        this.effectiveAriaLabelledBy = computed(() => {
+            if (this.ariaLabelledBy()) {
+                return this.ariaLabelledBy();
+            }
+            if (!this.ariaLabel() && this.label()) {
+                return this.labelId;
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaLabelledBy" }] : /* istanbul ignore next */ []));
+        this.effectiveAriaValueText = computed(() => {
+            const custom = this.ariaValueText();
+            if (custom) {
+                return custom(this.normalizedValue(), this.itemsCount());
+            }
+            return this.normalizedValue() === 0 ? "Not rated" : `${this.normalizedValue()} out of ${this.itemsCount()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaValueText" }] : /* istanbul ignore next */ []));
+        this.effectiveTabIndex = computed(() => (this.disabled() ? -1 : this.tabindex()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTabIndex" }] : /* istanbul ignore next */ []));
+        this.hoveredTemplate = contentChild(RatingHoveredItemTemplateDirective, { ...(ngDevMode ? { debugName: "hoveredTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.iconClasses = computed(() => ratingIconThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+        this.iconToRender = computed(() => ratingIcons[this.icon()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconToRender" }] : /* istanbul ignore next */ []));
+        this.interactionDisabled = computed(() => this.disabled() || this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interactionDisabled" }] : /* istanbul ignore next */ []));
+        this.interactionStep = computed(() => getRatingStep(this.precision()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interactionStep" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.itemClasses = computed(() => ratingItemThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(RatingItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.items = computed(() => range(1, this.itemsCount())
+            .select(itemValue => ({ index: itemValue - 1, itemValue }))
+            .toArray(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.labelClasses = computed(() => ratingLabelThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+        this.labelId = createElementControlId();
+        this.normalizedValue = computed(() => normalizeRatingValue(this.value(), this.itemsCount(), this.precision()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
+        this.overlayClipClasses = computed(() => ratingOverlayClipThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayClipClasses" }] : /* istanbul ignore next */ []));
+        this.overlayColor = computed(() => this.color() || "var(--color-primary)", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayColor" }] : /* istanbul ignore next */ []));
+        this.overlayContentClasses = computed(() => ratingOverlayContentThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayContentClasses" }] : /* istanbul ignore next */ []));
+        this.overlayIconClasses = computed(() => ratingOverlayIconThemeVariants({ size: this.size() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayIconClasses" }] : /* istanbul ignore next */ []));
+        this.overlayTemplate = computed(() => this.activeState() === "hovered" ? this.hoveredTemplate() : this.selectedTemplate(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayTemplate" }] : /* istanbul ignore next */ []));
+        this.previewActive = computed(() => this.previewValue() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewActive" }] : /* istanbul ignore next */ []));
+        this.previewValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewValue" }] : /* istanbul ignore next */ []));
+        this.selectedTemplate = contentChild(RatingSelectedItemTemplateDirective, { ...(ngDevMode ? { debugName: "selectedTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Associates help text or an error description with the focusable rating control.
+         * @default null
+         */
+        this.ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
+        /**
+         * @description Explicit accessible name for the rating control. Provide `aria-label`,
+         * `aria-labelledby`, or `label` so assistive technology can announce the control.
+         * @default null
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description IDs of external elements providing the accessible name for the rating control.
+         * @default null
+         */
+        this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Custom screen-reader value announcement. Receives the normalized value and the
+         * item count and returns the string to expose through `aria-valuetext`.
+         * @default null
+         */
+        this.ariaValueText = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
+        /**
+         * @description CSS color for selected and hovered rating visuals. Empty, `null`, and `undefined` values use the
+         * primary theme color.
+         * @default undefined
+         */
+        this.color = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Disables pointer and keyboard interaction and removes the control from the tab
+         * sequence. When bound to a signal form field via `[formField]`, this is written by the signal
+         * forms `Field` directive.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Built-in icon used for the default rating visuals. Choose `star`, `heart`,
+         * `circle`, `diamond`, or `flame`; use item templates to supply a custom icon.
+         * @default "star"
+         */
+        this.icon = input("star", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the component as invalid. Error styling requires both `invalid` and
+         * `touched` to be `true`. When bound to a signal form field via `[formField]`, this is written
+         * by the signal forms `Field` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Number of rating items. Fractional values are floored and values below one are
+         * raised to one.
+         * @default 5
+         */
+        this.itemsCount = input(5, { ...(ngDevMode ? { debugName: "itemsCount" } : /* istanbul ignore next */ {}), transform: normalizeItemsCount });
+        /**
+         * @description Optional visible label rendered before or after the rating items. When no
+         * explicit `aria-label` or `aria-labelledby` is supplied, the label provides the accessible
+         * name.
+         * @default null
+         */
+        this.label = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Places the visible label before or after the item group.
+         * @default "after"
+         */
+        this.labelPosition = input("after", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Selection granularity of the rating.
+         * @default "item"
+         */
+        this.precision = input("item", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Prevents value changes while preserving focusability and normal visual emphasis.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls cumulative or single-item filling.
+         * @default "continuous"
+         */
+        this.selection = input("continuous", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the icon dimensions, item hitboxes, spacing, and label
+         * typography.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index applied to the focusable rating control when not disabled. Accepts a
+         * numeric string and converts it to a number.
+         * @default 0
+         */
+        this.tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === "string" ? parseInt(value, 10) : value) });
+        /**
+         * @description Emitted when the user interacts with the control, marking the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Marks the component as touched. When bound to a signal form field via
+         * `[formField]`, this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Current rating value. `0` represents an unrated state. Values are normalized
+         * for rendering but are not rewritten until the user interacts with the component.
+         * @default 0
+         */
+        this.value = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    blur() {
+        this.controlElement().nativeElement.blur();
+    }
+    focus(options) {
+        if (!this.disabled()) {
+            this.controlElement().nativeElement.focus(options);
+        }
+    }
+    createItemContext(item) {
+        return {
+            $implicit: item.index,
+            fill: this.getItemFill(item.itemValue),
+            hovered: this.previewActive(),
+            index: item.index,
+            itemValue: item.itemValue,
+            selected: !this.previewActive()
+        };
+    }
+    getItemFill(itemValue) {
+        const displayValue = this.displayValue();
+        if (this.selection() === "single") {
+            return getSingleItemFill(displayValue, itemValue);
+        }
+        return getContinuousItemFill(displayValue, itemValue);
+    }
+    onBlur() {
+        this.previewValue.set(null);
+        this.touch.emit();
+    }
+    onClick(event) {
+        if (this.interactionDisabled()) {
+            return;
+        }
+        const candidate = this.getCandidateFromPointerEvent(event);
+        if (candidate === null) {
+            return;
+        }
+        const normalized = this.normalizeCandidate(candidate);
+        if (normalized !== this.normalizedValue()) {
+            this.value.set(normalized);
+        }
+        this.touch.emit();
+    }
+    onKeydown(event) {
+        if (this.interactionDisabled()) {
+            return;
+        }
+        const action = this.getKeyAction(event.key);
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        this.previewValue.set(null);
+        const current = this.normalizedValue();
+        let next;
+        switch (action) {
+            case "decrease":
+                next = this.normalizeCandidate(current - this.interactionStep());
+                break;
+            case "end":
+                next = this.itemsCount();
+                break;
+            case "home":
+                next = 0;
+                break;
+            case "increase":
+                next = this.normalizeCandidate(current + this.interactionStep());
+                break;
+        }
+        if (next !== current) {
+            this.value.set(next);
+        }
+        this.touch.emit();
+    }
+    onPointerLeave() {
+        this.previewValue.set(null);
+    }
+    onPointerMove(event) {
+        if (this.interactionDisabled()) {
+            return;
+        }
+        const candidate = this.getCandidateFromPointerEvent(event);
+        if (candidate !== null) {
+            this.previewValue.set(candidate);
+        }
+    }
+    getCandidateFromPointerEvent(event) {
+        const controlElement = this.controlElement().nativeElement;
+        const target = event.target;
+        const itemElement = target?.closest("[data-rating-index]") ?? null;
+        if (!itemElement || !controlElement.contains(itemElement)) {
+            return null;
+        }
+        const itemValue = Number(itemElement.getAttribute("data-rating-value"));
+        const itemRect = itemElement.getBoundingClientRect();
+        const direction = getComputedStyle(controlElement).direction === "rtl" ? "rtl" : "ltr";
+        return getPointerRatingValue({
+            clientX: event.clientX,
+            direction,
+            itemRect,
+            itemValue,
+            precision: this.precision()
+        });
+    }
+    getKeyAction(key) {
+        switch (key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                return "increase";
+            case "ArrowLeft":
+            case "ArrowDown":
+                return "decrease";
+            case "Home":
+                return "home";
+            case "End":
+                return "end";
+            default:
+                return null;
+        }
+    }
+    normalizeCandidate(value) {
+        return normalizeRatingValue(value, this.itemsCount(), this.precision());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RatingComponent, isStandalone: true, selector: "mona-rating", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, itemsCount: { classPropertyName: "itemsCount", publicName: "itemsCount", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, queries: [{ propertyName: "hoveredTemplate", first: true, predicate: RatingHoveredItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: RatingItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: RatingSelectedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "controlElement", first: true, predicate: ["ratingControl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n    @if (label() && labelPosition() === \"before\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n\n    <div\n        #ratingControl\n        role=\"slider\"\n        [class]=\"controlClasses()\"\n        [attr.tabindex]=\"effectiveTabIndex()\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"itemsCount()\"\n        [attr.aria-valuenow]=\"normalizedValue()\"\n        [attr.aria-valuetext]=\"effectiveAriaValueText()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"effectiveAriaLabelledBy()\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-invalid]=\"invalidState() || null\"\n        [attr.data-disabled]=\"disabled() || null\"\n        [attr.data-readonly]=\"readonly() || null\"\n        [attr.data-invalid]=\"invalidState() || null\"\n        [attr.data-precision]=\"precision()\"\n        [attr.data-selection]=\"selection()\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerleave)=\"onPointerLeave()\"\n        (click)=\"onClick($event)\">\n        @for (item of items(); track item.itemValue) {\n            <span\n                [class]=\"itemClasses()\"\n                [attr.data-rating-index]=\"item.index\"\n                [attr.data-rating-value]=\"item.itemValue\"\n                aria-hidden=\"true\">\n                <span class=\"flex h-full w-full items-center justify-center\">\n                    @if (itemTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemTemplate()!\"\n                            [ngTemplateOutletContext]=\"createItemContext(item)\">\n                        </ng-container>\n                    } @else {\n                        <svg lucideIcon [lucideIcon]=\"iconToRender()\" [class]=\"iconClasses()\" fill=\"none\"></svg>\n                    }\n                </span>\n\n                @let fill = getItemFill(item.itemValue);\n\n                @if (fill > 0) {\n                    <span [class]=\"overlayClipClasses()\" [style.inline-size.%]=\"fill * 100\">\n                        <span\n                            [class]=\"overlayContentClasses()\"\n                            [attr.data-state]=\"activeState()\"\n                            [style.color]=\"disabled() ? null : overlayColor()\">\n                            @if (overlayTemplate()) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"overlayTemplate()!\"\n                                    [ngTemplateOutletContext]=\"createItemContext(item)\">\n                                </ng-container>\n                            } @else {\n                                <svg\n                                    lucideIcon\n                                    [lucideIcon]=\"iconToRender()\"\n                                    [class]=\"overlayIconClasses()\"\n                                    fill=\"currentColor\"></svg>\n                            }\n                        </span>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (label() && labelPosition() === \"after\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-rating", imports: [NgTemplateOutlet, LucideDynamicIcon], template: "<div [class]=\"containerClasses()\">\n    @if (label() && labelPosition() === \"before\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n\n    <div\n        #ratingControl\n        role=\"slider\"\n        [class]=\"controlClasses()\"\n        [attr.tabindex]=\"effectiveTabIndex()\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"itemsCount()\"\n        [attr.aria-valuenow]=\"normalizedValue()\"\n        [attr.aria-valuetext]=\"effectiveAriaValueText()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"effectiveAriaLabelledBy()\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-invalid]=\"invalidState() || null\"\n        [attr.data-disabled]=\"disabled() || null\"\n        [attr.data-readonly]=\"readonly() || null\"\n        [attr.data-invalid]=\"invalidState() || null\"\n        [attr.data-precision]=\"precision()\"\n        [attr.data-selection]=\"selection()\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerleave)=\"onPointerLeave()\"\n        (click)=\"onClick($event)\">\n        @for (item of items(); track item.itemValue) {\n            <span\n                [class]=\"itemClasses()\"\n                [attr.data-rating-index]=\"item.index\"\n                [attr.data-rating-value]=\"item.itemValue\"\n                aria-hidden=\"true\">\n                <span class=\"flex h-full w-full items-center justify-center\">\n                    @if (itemTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"itemTemplate()!\"\n                            [ngTemplateOutletContext]=\"createItemContext(item)\">\n                        </ng-container>\n                    } @else {\n                        <svg lucideIcon [lucideIcon]=\"iconToRender()\" [class]=\"iconClasses()\" fill=\"none\"></svg>\n                    }\n                </span>\n\n                @let fill = getItemFill(item.itemValue);\n\n                @if (fill > 0) {\n                    <span [class]=\"overlayClipClasses()\" [style.inline-size.%]=\"fill * 100\">\n                        <span\n                            [class]=\"overlayContentClasses()\"\n                            [attr.data-state]=\"activeState()\"\n                            [style.color]=\"disabled() ? null : overlayColor()\">\n                            @if (overlayTemplate()) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"overlayTemplate()!\"\n                                    [ngTemplateOutletContext]=\"createItemContext(item)\">\n                                </ng-container>\n                            } @else {\n                                <svg\n                                    lucideIcon\n                                    [lucideIcon]=\"iconToRender()\"\n                                    [class]=\"overlayIconClasses()\"\n                                    fill=\"currentColor\"></svg>\n                            }\n                        </span>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (label() && labelPosition() === \"after\") {\n        <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ label() }}</span>\n    }\n</div>\n" }]
+        }], propDecorators: { controlElement: [{ type: i0.ViewChild, args: ["ratingControl", { isSignal: true }] }], hoveredTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RatingHoveredItemTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RatingItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RatingSelectedItemTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValueText", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsCount", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/rating
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingSelectedItemTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-rating.mjs.map

package/fesm2022/nanahoshi-mona-ui-segmented.mjs

@@ -114,7 +114,7 @@ class SegmentedComponent {
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         /**
          * @description Border-radius preset applied to the segmented container and its options.
-         * @default "large"
+         * @default "medium"
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -261,6 +261,10 @@
       "types": "./types/nanahoshi-mona-ui-radio-button.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-radio-button.mjs"
     },
+    "./rating": {
+      "types": "./types/nanahoshi-mona-ui-rating.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-rating.mjs"
+    },
     "./scroll-view": {
       "types": "./types/nanahoshi-mona-ui-scroll-view.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-scroll-view.mjs"

package/rating/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-rating.mjs",
+  "typings": "../types/nanahoshi-mona-ui-rating.d.ts"
+}