@malva-ui/core 0.1.12

package/esm2022/rating/lib/rating/rating.js

@@ -0,0 +1,208 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, model, signal, ViewEncapsulation, } from '@angular/core';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { MlvSignalFormControlBase, MLV_FORM_CONTROL, } from '@malva-ui/core/form-utils';
+import { LucideStar } from '@lucide/angular';
+import { MLV_RATING_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+/**
+ * Star rating component with half-star precision and read-only mode.
+ *
+ * Extends {@link MlvSignalFormControlBase}, inheriting the shared `disabled`,
+ * `readonly`, `state`, `id`, `label`, `hint` and `message` inputs plus the
+ * signal-forms field contract.
+ *
+ * - Hover preview highlights stars up to the cursor.
+ * - Half-star precision via clip-path technique when `step="0.5"`.
+ * - Keyboard: ArrowRight/ArrowLeft step up/down, Home for min, End for max.
+ * - Integrates with signal, reactive, and template-driven Angular forms.
+ *
+ * @example Basic
+ * ```html
+ * <mlv-rating [max]="5" [(ngModel)]="rating" />
+ * ```
+ *
+ * @example Half-star precision
+ * ```html
+ * <mlv-rating [step]="0.5" [formField]="ratingForm.score" />
+ * ```
+ *
+ * @example Read-only display
+ * ```html
+ * <mlv-rating [value]="4.5" [readonly]="true" />
+ * ```
+ */
+export class MlvRating extends MlvSignalFormControlBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_RATING_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /**
+     * Total number of stars.
+     * @default 5
+     */
+    max = input(5, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(1, Math.floor(coerceNumberProperty(value, 5))) });
+    /**
+     * Step increment — `1` for whole stars, `0.5` for half-star precision.
+     * @default 1
+     */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => (value === 0.5 ? 0.5 : 1) });
+    // ── Internal state ─────────────────────────────────────────────────────────
+    /**
+     * The committed rating — the signal-forms `FormValueControl` model. Kept in
+     * sync by `[formField]`, `[formControl]`, and `ngModel` bindings.
+     */
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Tracks the hover preview value (0 = not hovering). */
+    _hoverValue = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hoverValue" }] : /* istanbul ignore next */ []));
+    /** The value visually displayed — hover preview takes precedence. */
+    _displayValue = computed(() => this._hoverValue() || this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    /** Indices `[0 … max-1]` for `@for` iteration. */
+    _indices = computed(() => Array.from({ length: this.max() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_indices" }] : /* istanbul ignore next */ []));
+    /**
+     * The 0-based index of the star that is in the tab order (roving tabindex).
+     * The star covering the current value is tabbable; when no value is set the
+     * first star is. All other stars are removed from the tab order so the rating
+     * is a single tab stop, with Arrow keys moving between values.
+     */
+    _activeIndex = computed(() => {
+        const value = this.value();
+        if (value <= 0)
+            return 0;
+        return Math.min(this.max() - 1, Math.ceil(value) - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
+    /** Whether the control holds a clearable value — A non-zero rating is set. */
+    hasValue = computed(() => this.value() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // ── Fill calculation ────────────────────────────────────────────────────────
+    /**
+     * Returns the percentage of star `starIndex` (1-indexed) that should be filled.
+     * 100 = full, 50 = half, 0 = empty.
+     */
+    _getFillPercent(starIndex) {
+        const display = this._displayValue();
+        if (display >= starIndex)
+            return 100;
+        if (display >= starIndex - 0.5)
+            return 50;
+        return 0;
+    }
+    /**
+     * Returns the CSS `clip-path` value for the filled star overlay.
+     * `inset(0 {remainder}% 0 0)` clips the right side.
+     */
+    _clipPath(starIndex) {
+        const remainder = 100 - this._getFillPercent(starIndex);
+        return `inset(0 ${remainder}% 0 0)`;
+    }
+    /**
+     * @internal Resolves the per-star aria-label, e.g. "Rate 3 out of 5".
+     * @param starIndex 1-based star number.
+     */
+    _rateLabel(starIndex) {
+        return this._resolver.resolve(this._i18n(), 'rateValue', { value: starIndex, max: this.max() });
+    }
+    /**
+     * @internal Roving tabindex for star `index` (0-based): `0` for the active
+     * star, `-1` for the rest. Always `-1` when read-only or disabled.
+     */
+    _starTabIndex(index) {
+        if (this.readonly() || this.computedDisabled())
+            return -1;
+        return index === this._activeIndex() ? 0 : -1;
+    }
+    // ── Event handlers ─────────────────────────────────────────────────────────
+    /** @internal */
+    _onStarMouseMove(starIndex, event) {
+        if (this.readonly() || this.computedDisabled())
+            return;
+        const el = event.currentTarget;
+        const isLeftHalf = event.offsetX < el.offsetWidth / 2;
+        this._hoverValue.set(this.step() === 0.5 && isLeftHalf ? starIndex - 0.5 : starIndex);
+    }
+    /** @internal */
+    _onStarClick(starIndex, event) {
+        if (this.readonly() || this.computedDisabled())
+            return;
+        const el = event.currentTarget;
+        const isLeftHalf = event.offsetX < el.offsetWidth / 2;
+        const newValue = this.step() === 0.5 && isLeftHalf ? starIndex - 0.5 : starIndex;
+        this.value.set(newValue);
+    }
+    /** @internal */
+    _onHostMouseLeave() {
+        this._hoverValue.set(0);
+    }
+    /** @internal */
+    _onHostKeydown(event) {
+        if (this.readonly() || this.computedDisabled())
+            return;
+        const current = this.value();
+        const stepSize = this.step();
+        let next = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = Math.min(this.max(), current + stepSize);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = Math.max(0, current - stepSize);
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = this.max();
+                break;
+            default:
+                return;
+        }
+        if (next !== null) {
+            event.preventDefault();
+            this.value.set(next);
+        }
+    }
+    /** @internal */
+    _onStarFocus(starIndex) {
+        this._hoverValue.set(starIndex);
+    }
+    /** @internal */
+    _onStarBlur() {
+        this._hoverValue.set(0);
+        this._markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRating, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvRating, isStandalone: true, selector: "mlv-rating", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "mouseleave": "_onHostMouseLeave()", "keydown": "_onHostKeydown($event)" }, properties: { "class": "\"mlv-rating--state-\" + resolvedState()", "class.mlv-rating--readonly": "readonly()", "class.mlv-rating--disabled": "computedDisabled()", "attr.id": "id()", "attr.role": "\"group\"", "attr.aria-label": "_i18n().rating", "attr.aria-disabled": "computedDisabled() || null", "attr.tabindex": "readonly() || computedDisabled() ? null : -1" }, classAttribute: "mlv-rating" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvRating),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "@for (i of _indices(); track i) {\n<button\n  type=\"button\"\n  class=\"mlv-rating__star\"\n  [attr.aria-label]=\"_rateLabel(i + 1)\"\n  [attr.aria-pressed]=\"value() >= (i + 1)\"\n  [disabled]=\"computedDisabled() || readonly() || null\"\n  [tabindex]=\"_starTabIndex(i)\"\n  (mousemove)=\"_onStarMouseMove(i + 1, $event)\"\n  (click)=\"_onStarClick(i + 1, $event)\"\n  (focus)=\"_onStarFocus(i + 1)\"\n  (blur)=\"_onStarBlur()\"\n>\n  <!-- Empty star (always rendered, forms the \"outline\") -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--empty\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n  <!-- Filled star (clipped to show partial fill) -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--filled\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n    [style.clip-path]=\"_clipPath(i + 1)\"\n  />\n</button>\n}\n", styles: [".mlv-rating{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-rating *{box-sizing:border-box}.mlv-rating{display:inline-flex;align-items:center;gap:.125rem}.mlv-rating__star{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:var(--mlv-radius-s);outline:none;transition-property:transform,color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out)}.mlv-rating__star:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-rating__star:hover:not(:disabled){transform:scale(1.15)}.mlv-rating__star:active:not(:disabled){transform:scale(.97)}.mlv-rating__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.mlv-rating__icon--empty{color:var(--mlv-border-normal);fill:currentcolor}.mlv-rating__icon--filled{color:var(--mlv-text-warning);fill:currentcolor}.mlv-rating--state-error .mlv-rating__icon--empty{color:var(--mlv-border-error)}.mlv-rating--state-warning .mlv-rating__icon--empty{color:var(--mlv-border-warning)}.mlv-rating--state-success .mlv-rating__icon--empty{color:var(--mlv-border-success)}.mlv-rating--state-info .mlv-rating__icon--empty{color:var(--mlv-border-info)}.mlv-rating--readonly .mlv-rating__star{cursor:default;pointer-events:none}.mlv-rating--readonly .mlv-rating__star:hover{transform:none}.mlv-rating--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-rating--disabled .mlv-rating__star{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-rating .mlv-rating__star{transition:none}.mlv-rating .mlv-rating__star:hover,.mlv-rating .mlv-rating__star:active{transform:none}}\n"], dependencies: [{ kind: "component", type: LucideStar, selector: "svg[lucideStar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvRating, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-rating', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideStar], providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvRating),
+                        },
+                    ], host: {
+                        class: 'mlv-rating',
+                        '[class]': '"mlv-rating--state-" + resolvedState()',
+                        '[class.mlv-rating--readonly]': 'readonly()',
+                        '[class.mlv-rating--disabled]': 'computedDisabled()',
+                        '[attr.id]': 'id()',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-label]': '_i18n().rating',
+                        '[attr.aria-disabled]': 'computedDisabled() || null',
+                        '(mouseleave)': '_onHostMouseLeave()',
+                        '(keydown)': '_onHostKeydown($event)',
+                        '[attr.tabindex]': 'readonly() || computedDisabled() ? null : -1',
+                    }, template: "@for (i of _indices(); track i) {\n<button\n  type=\"button\"\n  class=\"mlv-rating__star\"\n  [attr.aria-label]=\"_rateLabel(i + 1)\"\n  [attr.aria-pressed]=\"value() >= (i + 1)\"\n  [disabled]=\"computedDisabled() || readonly() || null\"\n  [tabindex]=\"_starTabIndex(i)\"\n  (mousemove)=\"_onStarMouseMove(i + 1, $event)\"\n  (click)=\"_onStarClick(i + 1, $event)\"\n  (focus)=\"_onStarFocus(i + 1)\"\n  (blur)=\"_onStarBlur()\"\n>\n  <!-- Empty star (always rendered, forms the \"outline\") -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--empty\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n  <!-- Filled star (clipped to show partial fill) -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--filled\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n    [style.clip-path]=\"_clipPath(i + 1)\"\n  />\n</button>\n}\n", styles: [".mlv-rating{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-rating *{box-sizing:border-box}.mlv-rating{display:inline-flex;align-items:center;gap:.125rem}.mlv-rating__star{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:var(--mlv-radius-s);outline:none;transition-property:transform,color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out)}.mlv-rating__star:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-rating__star:hover:not(:disabled){transform:scale(1.15)}.mlv-rating__star:active:not(:disabled){transform:scale(.97)}.mlv-rating__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.mlv-rating__icon--empty{color:var(--mlv-border-normal);fill:currentcolor}.mlv-rating__icon--filled{color:var(--mlv-text-warning);fill:currentcolor}.mlv-rating--state-error .mlv-rating__icon--empty{color:var(--mlv-border-error)}.mlv-rating--state-warning .mlv-rating__icon--empty{color:var(--mlv-border-warning)}.mlv-rating--state-success .mlv-rating__icon--empty{color:var(--mlv-border-success)}.mlv-rating--state-info .mlv-rating__icon--empty{color:var(--mlv-border-info)}.mlv-rating--readonly .mlv-rating__star{cursor:default;pointer-events:none}.mlv-rating--readonly .mlv-rating__star:hover{transform:none}.mlv-rating--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-rating--disabled .mlv-rating__star{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mlv-rating .mlv-rating__star{transition:none}.mlv-rating .mlv-rating__star:hover,.mlv-rating .mlv-rating__star:active{transform:none}}\n"] }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+//# sourceMappingURL=rating.js.map

package/esm2022/rating/lib/rating/rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../../../../../libs/core/rating/src/lib/rating/rating.ts","../../../../../../../libs/core/rating/src/lib/rating/rating.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport type { MlvFormControl } from '@malva-ui/core/form-utils';\nimport {\n  MlvSignalFormControlBase,\n  MLV_FORM_CONTROL,\n} from '@malva-ui/core/form-utils';\nimport { LucideStar } from '@lucide/angular';\nimport { MLV_RATING_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\n\n/**\n * Star rating component with half-star precision and read-only mode.\n *\n * Extends {@link MlvSignalFormControlBase}, inheriting the shared `disabled`,\n * `readonly`, `state`, `id`, `label`, `hint` and `message` inputs plus the\n * signal-forms field contract.\n *\n * - Hover preview highlights stars up to the cursor.\n * - Half-star precision via clip-path technique when `step=\"0.5\"`.\n * - Keyboard: ArrowRight/ArrowLeft step up/down, Home for min, End for max.\n * - Integrates with signal, reactive, and template-driven Angular forms.\n *\n * @example Basic\n * ```html\n * <mlv-rating [max]=\"5\" [(ngModel)]=\"rating\" />\n * ```\n *\n * @example Half-star precision\n * ```html\n * <mlv-rating [step]=\"0.5\" [formField]=\"ratingForm.score\" />\n * ```\n *\n * @example Read-only display\n * ```html\n * <mlv-rating [value]=\"4.5\" [readonly]=\"true\" />\n * ```\n */\n@Component({\n  selector: 'mlv-rating',\n  templateUrl: './rating.html',\n  styleUrl: './rating.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LucideStar],\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvRating),\n    },\n  ],\n  host: {\n    class: 'mlv-rating',\n    '[class]': '\"mlv-rating--state-\" + resolvedState()',\n    '[class.mlv-rating--readonly]': 'readonly()',\n    '[class.mlv-rating--disabled]': 'computedDisabled()',\n    '[attr.id]': 'id()',\n    '[attr.role]': '\"group\"',\n    '[attr.aria-label]': '_i18n().rating',\n    '[attr.aria-disabled]': 'computedDisabled() || null',\n    '(mouseleave)': '_onHostMouseLeave()',\n    '(keydown)': '_onHostKeydown($event)',\n    '[attr.tabindex]': 'readonly() || computedDisabled() ? null : -1',\n  },\n})\nexport class MlvRating\n  extends MlvSignalFormControlBase<number>\n  implements MlvFormControl\n{\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_RATING_I18N);\n\n  /** @private Resolver for ICU parameterized i18n strings. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /**\n   * Total number of stars.\n   * @default 5\n   */\n  readonly max = input<number, number | string | null | undefined>(5, {\n    transform: (value) =>\n      Math.max(1, Math.floor(coerceNumberProperty(value, 5))),\n  });\n\n  /**\n   * Step increment — `1` for whole stars, `0.5` for half-star precision.\n   * @default 1\n   */\n  readonly step = input<1 | 0.5, number | null | undefined>(1, {\n    transform: (value) => (value === 0.5 ? 0.5 : 1),\n  });\n\n  // ── Internal state ─────────────────────────────────────────────────────────\n\n  /**\n   * The committed rating — the signal-forms `FormValueControl` model. Kept in\n   * sync by `[formField]`, `[formControl]`, and `ngModel` bindings.\n   */\n  readonly value = model(0);\n\n  /** Tracks the hover preview value (0 = not hovering). */\n  protected readonly _hoverValue = signal<number>(0);\n\n  /** The value visually displayed — hover preview takes precedence. */\n  protected readonly _displayValue = computed(\n    () => this._hoverValue() || this.value(),\n  );\n\n  /** Indices `[0 … max-1]` for `@for` iteration. */\n  protected readonly _indices = computed(() =>\n    Array.from({ length: this.max() }, (_, i) => i),\n  );\n\n  /**\n   * The 0-based index of the star that is in the tab order (roving tabindex).\n   * The star covering the current value is tabbable; when no value is set the\n   * first star is. All other stars are removed from the tab order so the rating\n   * is a single tab stop, with Arrow keys moving between values.\n   */\n  protected readonly _activeIndex = computed(() => {\n    const value = this.value();\n    if (value <= 0) return 0;\n    return Math.min(this.max() - 1, Math.ceil(value) - 1);\n  });\n\n  /** Whether the control holds a clearable value — A non-zero rating is set. */\n  readonly hasValue = computed(() => this.value() > 0);\n\n  // ── Fill calculation ────────────────────────────────────────────────────────\n\n  /**\n   * Returns the percentage of star `starIndex` (1-indexed) that should be filled.\n   * 100 = full, 50 = half, 0 = empty.\n   */\n  protected _getFillPercent(starIndex: number): number {\n    const display = this._displayValue();\n    if (display >= starIndex) return 100;\n    if (display >= starIndex - 0.5) return 50;\n    return 0;\n  }\n\n  /**\n   * Returns the CSS `clip-path` value for the filled star overlay.\n   * `inset(0 {remainder}% 0 0)` clips the right side.\n   */\n  protected _clipPath(starIndex: number): string {\n    const remainder = 100 - this._getFillPercent(starIndex);\n    return `inset(0 ${remainder}% 0 0)`;\n  }\n\n  /**\n   * @internal Resolves the per-star aria-label, e.g. \"Rate 3 out of 5\".\n   * @param starIndex 1-based star number.\n   */\n  protected _rateLabel(starIndex: number): string {\n    return this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'rateValue',\n      { value: starIndex, max: this.max() },\n    );\n  }\n\n  /**\n   * @internal Roving tabindex for star `index` (0-based): `0` for the active\n   * star, `-1` for the rest. Always `-1` when read-only or disabled.\n   */\n  protected _starTabIndex(index: number): number {\n    if (this.readonly() || this.computedDisabled()) return -1;\n    return index === this._activeIndex() ? 0 : -1;\n  }\n\n  // ── Event handlers ─────────────────────────────────────────────────────────\n\n  /** @internal */\n  protected _onStarMouseMove(starIndex: number, event: MouseEvent): void {\n    if (this.readonly() || this.computedDisabled()) return;\n    const el = event.currentTarget as HTMLElement;\n    const isLeftHalf = event.offsetX < el.offsetWidth / 2;\n    this._hoverValue.set(\n      this.step() === 0.5 && isLeftHalf ? starIndex - 0.5 : starIndex,\n    );\n  }\n\n  /** @internal */\n  protected _onStarClick(starIndex: number, event: MouseEvent): void {\n    if (this.readonly() || this.computedDisabled()) return;\n    const el = event.currentTarget as HTMLElement;\n    const isLeftHalf = event.offsetX < el.offsetWidth / 2;\n    const newValue =\n      this.step() === 0.5 && isLeftHalf ? starIndex - 0.5 : starIndex;\n    this.value.set(newValue);\n  }\n\n  /** @internal */\n  protected _onHostMouseLeave(): void {\n    this._hoverValue.set(0);\n  }\n\n  /** @internal */\n  protected _onHostKeydown(event: KeyboardEvent): void {\n    if (this.readonly() || this.computedDisabled()) return;\n    const current = this.value();\n    const stepSize = this.step();\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = Math.min(this.max(), current + stepSize);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = Math.max(0, current - stepSize);\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = this.max();\n        break;\n      default:\n        return;\n    }\n\n    if (next !== null) {\n      event.preventDefault();\n      this.value.set(next);\n    }\n  }\n\n  /** @internal */\n  protected _onStarFocus(starIndex: number): void {\n    this._hoverValue.set(starIndex);\n  }\n\n  /** @internal */\n  protected _onStarBlur(): void {\n    this._hoverValue.set(0);\n    this._markTouched();\n  }\n}\n","@for (i of _indices(); track i) {\n<button\n  type=\"button\"\n  class=\"mlv-rating__star\"\n  [attr.aria-label]=\"_rateLabel(i + 1)\"\n  [attr.aria-pressed]=\"value() >= (i + 1)\"\n  [disabled]=\"computedDisabled() || readonly() || null\"\n  [tabindex]=\"_starTabIndex(i)\"\n  (mousemove)=\"_onStarMouseMove(i + 1, $event)\"\n  (click)=\"_onStarClick(i + 1, $event)\"\n  (focus)=\"_onStarFocus(i + 1)\"\n  (blur)=\"_onStarBlur()\"\n>\n  <!-- Empty star (always rendered, forms the \"outline\") -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--empty\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n  <!-- Filled star (clipped to show partial fill) -->\n  <svg\n    lucideStar\n    class=\"mlv-rating__icon mlv-rating__icon--filled\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n    [style.clip-path]=\"_clipPath(i + 1)\"\n  />\n</button>\n}\n"]}

package/esm2022/rating/malva-ui-core-rating.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-rating.js.map

package/esm2022/rating/malva-ui-core-rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-rating.js","sourceRoot":"","sources":["../../../../../libs/core/rating/src/malva-ui-core-rating.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/scrollbar/index.js

@@ -0,0 +1,2 @@
+export * from './lib/scrollbar/scrollbar';
+//# sourceMappingURL=index.js.map

package/esm2022/scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/scrollbar/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './lib/scrollbar/scrollbar';\n"]}