ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-radio.mjs

@@ -0,0 +1,204 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, inject, computed, ViewEncapsulation, Component, signal, forwardRef } from '@angular/core';
+import { WrIcon } from 'ngwr/icon';
+import { randomId, noop } from 'ngwr/utils';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Token a `<wr-radio>` injects to participate in its parent `<wr-radio-group>`
+ * — reads the selected value, shares the `name` attribute, and signals
+ * selection / blur back up.
+ *
+ * @internal
+ */
+const WR_RADIO_GROUP = new InjectionToken('WR_RADIO_GROUP');
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Single-choice option. Must be a child of `<wr-radio-group>`.
+ *
+ * @example
+ * ```html
+ * <wr-radio-group [(ngModel)]="size">
+ *   <wr-radio value="sm">Small</wr-radio>
+ *   <wr-radio value="md">Medium</wr-radio>
+ *   <wr-radio value="lg">Large</wr-radio>
+ * </wr-radio-group>
+ * ```
+ *
+ * @see https://ngwr.dev/components/radio
+ */
+class WrRadio {
+    /** Stable id used to associate the native input with its label. */
+    id = input(randomId('wr-radio'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Value selected when this radio is checked. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional icon name rendered inside the dot when checked, in place of the
+     * default solid circle. Use any registered NGWR icon.
+     */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    group = inject(WR_RADIO_GROUP, { optional: true });
+    constructor() {
+        if (!this.group) {
+            throw new Error('[NGWR] <wr-radio> must be used inside <wr-radio-group>.');
+        }
+    }
+    name = computed(() => this.group?.name() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    checked = computed(() => this.group?.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.group?.isDisabled() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-radio'];
+        if (this.checked())
+            parts.push('wr-radio--checked');
+        if (this.disabled())
+            parts.push('wr-radio--disabled');
+        if (this.icon())
+            parts.push('wr-radio--has-icon');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onSelect() {
+        this.group?.select(this.value());
+    }
+    onBlur() {
+        this.group?.touch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrRadio, isStandalone: true, selector: "wr-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<label class=\"wr-radio__label\" [for]=\"id()\">\n  <input\n    class=\"wr-radio__input\"\n    type=\"radio\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onSelect()\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span class=\"wr-radio__dot\" aria-hidden=\"true\">\n    @if (icon(); as iconName) {\n      <wr-icon class=\"wr-radio__icon\" [name]=\"iconName\" />\n    }\n  </span>\n\n  <span class=\"wr-radio__text\">\n    <ng-content />\n  </span>\n</label>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-radio', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrIcon], template: "<label class=\"wr-radio__label\" [for]=\"id()\">\n  <input\n    class=\"wr-radio__input\"\n    type=\"radio\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onSelect()\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span class=\"wr-radio__dot\" aria-hidden=\"true\">\n    @if (icon(); as iconName) {\n      <wr-icon class=\"wr-radio__icon\" [name]=\"iconName\" />\n    }\n  </span>\n\n  <span class=\"wr-radio__text\">\n    <ng-content />\n  </span>\n</label>\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Hosts a group of `<wr-radio>` children as a single-value selection.
+ *
+ * Implements `ControlValueAccessor` — the group's `value` is the
+ * currently selected radio's `value`.
+ *
+ * @example
+ * ```html
+ * <wr-radio-group [(ngModel)]="size">
+ *   <wr-radio value="sm">Small</wr-radio>
+ *   <wr-radio value="md">Medium</wr-radio>
+ *   <wr-radio value="lg">Large</wr-radio>
+ * </wr-radio-group>
+ * ```
+ *
+ * @see https://ngwr.dev/components/radio
+ */
+class WrRadioGroup {
+    /**
+     * Shared `name` attribute. Defaults to a random id so multiple groups
+     * on the same page don't collide.
+     */
+    name = input(randomId('wr-radio-group'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Disable the whole group. Also set by Angular forms via `setDisabledState`.
+     *
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    /** Effective disabled state — true if either source disables. */
+    isDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange = noop;
+    onTouched = noop;
+    // WrRadioGroupContext
+    select(value) {
+        if (this.isDisabled())
+            return;
+        this.value.set(value);
+        this.onChange(value);
+    }
+    touch() {
+        this.onTouched();
+    }
+    // ControlValueAccessor
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrRadioGroup, isStandalone: true, selector: "wr-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radiogroup" }, classAttribute: "wr-radio-group" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrRadioGroup),
+                multi: true,
+            },
+            {
+                provide: WR_RADIO_GROUP,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrRadioGroup),
+            },
+        ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-radio-group',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'wr-radio-group', role: 'radiogroup' },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrRadioGroup),
+                            multi: true,
+                        },
+                        {
+                            provide: WR_RADIO_GROUP,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrRadioGroup),
+                        },
+                    ],
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WR_RADIO_GROUP, WrRadio, WrRadioGroup };
+//# sourceMappingURL=ngwr-radio.mjs.map

package/fesm2022/ngwr-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-radio.mjs","sources":["../../../projects/lib/radio/tokens/radio-group.token.ts","../../../projects/lib/radio/radio.ts","../../../projects/lib/radio/radio.html","../../../projects/lib/radio/radio-group.ts","../../../projects/lib/radio/ngwr-radio.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a radio uses to talk to its parent `<wr-radio-group>`.\n *\n * @internal\n */\nexport interface WrRadioGroupContext {\n  /** Shared `name` attribute applied to every native input in the group. */\n  readonly name: Signal<string>;\n  /** Currently selected value. */\n  readonly value: Signal<unknown>;\n  /** Whether the entire group is disabled. */\n  readonly isDisabled: Signal<boolean>;\n  /** Select the given value. */\n  select(value: unknown): void;\n  /** Mark the group as touched (called on blur from any child). */\n  touch(): void;\n}\n\n/**\n * Token a `<wr-radio>` injects to participate in its parent `<wr-radio-group>`\n * — reads the selected value, shares the `name` attribute, and signals\n * selection / blur back up.\n *\n * @internal\n */\nexport const WR_RADIO_GROUP = new InjectionToken<WrRadioGroupContext>('WR_RADIO_GROUP');\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input } from '@angular/core';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { randomId } from 'ngwr/utils';\n\nimport { WR_RADIO_GROUP } from './tokens';\n\n/**\n * Single-choice option. Must be a child of `<wr-radio-group>`.\n *\n * @example\n * ```html\n * <wr-radio-group [(ngModel)]=\"size\">\n *   <wr-radio value=\"sm\">Small</wr-radio>\n *   <wr-radio value=\"md\">Medium</wr-radio>\n *   <wr-radio value=\"lg\">Large</wr-radio>\n * </wr-radio-group>\n * ```\n *\n * @see https://ngwr.dev/components/radio\n */\n@Component({\n  selector: 'wr-radio',\n  templateUrl: './radio.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrIcon],\n})\nexport class WrRadio {\n  /** Stable id used to associate the native input with its label. */\n  readonly id = input<string>(randomId('wr-radio'));\n\n  /** Value selected when this radio is checked. */\n  readonly value = input.required<unknown>();\n\n  /**\n   * Optional icon name rendered inside the dot when checked, in place of the\n   * default solid circle. Use any registered NGWR icon.\n   */\n  readonly icon = input<WrIconName | null>(null);\n\n  private readonly group = inject(WR_RADIO_GROUP, { optional: true });\n\n  constructor() {\n    if (!this.group) {\n      throw new Error('[NGWR] <wr-radio> must be used inside <wr-radio-group>.');\n    }\n  }\n\n  protected readonly name = computed(() => this.group?.name() ?? '');\n  protected readonly checked = computed(() => this.group?.value() === this.value());\n  protected readonly disabled = computed(() => this.group?.isDisabled() ?? false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-radio'];\n    if (this.checked()) parts.push('wr-radio--checked');\n    if (this.disabled()) parts.push('wr-radio--disabled');\n    if (this.icon()) parts.push('wr-radio--has-icon');\n    return parts.join(' ');\n  });\n\n  protected onSelect(): void {\n    this.group?.select(this.value());\n  }\n\n  protected onBlur(): void {\n    this.group?.touch();\n  }\n}\n","<label class=\"wr-radio__label\" [for]=\"id()\">\n  <input\n    class=\"wr-radio__input\"\n    type=\"radio\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onSelect()\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span class=\"wr-radio__dot\" aria-hidden=\"true\">\n    @if (icon(); as iconName) {\n      <wr-icon class=\"wr-radio__icon\" [name]=\"iconName\" />\n    }\n  </span>\n\n  <span class=\"wr-radio__text\">\n    <ng-content />\n  </span>\n</label>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, forwardRef, input, signal } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop, randomId } from 'ngwr/utils';\n\nimport { WR_RADIO_GROUP, type WrRadioGroupContext } from './tokens';\n\n/**\n * Hosts a group of `<wr-radio>` children as a single-value selection.\n *\n * Implements `ControlValueAccessor` — the group's `value` is the\n * currently selected radio's `value`.\n *\n * @example\n * ```html\n * <wr-radio-group [(ngModel)]=\"size\">\n *   <wr-radio value=\"sm\">Small</wr-radio>\n *   <wr-radio value=\"md\">Medium</wr-radio>\n *   <wr-radio value=\"lg\">Large</wr-radio>\n * </wr-radio-group>\n * ```\n *\n * @see https://ngwr.dev/components/radio\n */\n@Component({\n  selector: 'wr-radio-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-radio-group', role: 'radiogroup' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrRadioGroup),\n      multi: true,\n    },\n    {\n      provide: WR_RADIO_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrRadioGroup),\n    },\n  ],\n})\nexport class WrRadioGroup implements ControlValueAccessor, WrRadioGroupContext {\n  /**\n   * Shared `name` attribute. Defaults to a random id so multiple groups\n   * on the same page don't collide.\n   */\n  readonly name = input<string>(randomId('wr-radio-group'));\n\n  /**\n   * Disable the whole group. Also set by Angular forms via `setDisabledState`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  readonly value = signal<unknown>(null);\n\n  private readonly disabledFromCva = signal(false);\n\n  /** Effective disabled state — true if either source disables. */\n  readonly isDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  private onChange: (value: unknown) => void = noop;\n  private onTouched: () => void = noop;\n\n  // WrRadioGroupContext\n\n  select(value: unknown): void {\n    if (this.isDisabled()) return;\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  touch(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor\n\n  writeValue(value: unknown): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: (value: unknown) => 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.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-rating.mjs

@@ -0,0 +1,180 @@
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, signal, computed, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { clamp, noop } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Star rating input. Click or hover to set a value; supports half-star
+ * increments via `step="0.5"`. Implements `ControlValueAccessor` — value
+ * is `number | null` (clamped to `[0, count]`).
+ *
+ * Keyboard: `←` / `→` bump by `step`, `Home` / `End` jump to 0 / max.
+ * Clicking the current value clears it (toggle off).
+ *
+ * @example
+ * ```html
+ * <wr-rating [(ngModel)]="score" />
+ * <wr-rating [(ngModel)]="score" [count]="10" step="0.5" />
+ * <wr-rating [ngModel]="4.5" [readonly]="true" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/rating
+ */
+class WrRating {
+    /** Total number of slots. @default 5 */
+    count = input(5, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, coerceNumberProperty(v, 5)) });
+    /** Step granularity — `1` for whole stars, `0.5` for halves. @default 1 */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (v) => (Number(v) === 0.5 ? 0.5 : 1) });
+    /** Read-only — value is displayed but not interactive. @default false */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Disable interaction. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Accessible label. @default 'Rating' */
+    ariaLabel = input('Rating', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Last committed value (mirrored from the CVA). */
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Transient hover preview — overrides `value` for display when set. */
+    hoverValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    interactive = computed(() => !this.effectiveDisabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** What we actually render — hover wins while hovering. */
+    displayValue = computed(() => this.hoverValue() ?? this.value() ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    slots = computed(() => Array.from({ length: this.count() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-rating'];
+        if (this.readonly())
+            parts.push('wr-rating--readonly');
+        if (this.effectiveDisabled())
+            parts.push('wr-rating--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Fill ratio for slot `i` in `[0, 1]` — drives the CSS clip width. */
+    fillFor(i) {
+        return clamp(this.displayValue() - i, 0, 1);
+    }
+    // ControlValueAccessor
+    onChange = noop;
+    onTouched = noop;
+    writeValue(value) {
+        this.value.set(value === null || value === undefined ? null : clamp(Number(value), 0, this.count()));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    // Template handlers
+    onSlotMove(event, index) {
+        if (!this.interactive())
+            return;
+        this.hoverValue.set(this.computeValue(event, index));
+    }
+    onLeave() {
+        this.hoverValue.set(null);
+    }
+    onSlotClick(event, index) {
+        if (!this.interactive())
+            return;
+        const next = this.computeValue(event, index);
+        // Click the current value → clear it.
+        const final = next === this.value() ? null : next;
+        this.commit(final);
+    }
+    onKeydown(event) {
+        if (!this.interactive())
+            return;
+        const max = this.count();
+        const step = this.step();
+        const current = this.value() ?? 0;
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = clamp(current + step, 0, max);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = clamp(current - step, 0, max);
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = max;
+                break;
+            case 'Delete':
+            case 'Backspace':
+                next = null;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.commit(next);
+    }
+    // Internals
+    /** Convert a mouse position over slot `index` to a snapped value. */
+    computeValue(event, index) {
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const raw = index + ratio;
+        const step = this.step();
+        const snapped = Math.ceil(raw / step) * step;
+        return clamp(snapped, step, this.count());
+    }
+    commit(value) {
+        this.value.set(value);
+        this.hoverValue.set(null);
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrRating, isStandalone: true, selector: "wr-rating", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrRating),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"wr-rating__row\"\n  role=\"slider\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"count()\"\n  [attr.aria-valuenow]=\"value() ?? 0\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"effectiveDisabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseleave)=\"onLeave()\"\n>\n  @for (slot of slots(); track $index) {\n    <!-- The parent row owns keyboard focus + handlers; slots are pointer-only\n         click targets, so the a11y rules below are intentionally suppressed. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <span\n      class=\"wr-rating__slot\"\n      [class.wr-rating__slot--interactive]=\"interactive()\"\n      [style.--wr-rating-fill]=\"fillFor($index)\"\n      (mousemove)=\"onSlotMove($event, $index)\"\n      (click)=\"onSlotClick($event, $index)\"\n    >\n      <!-- Outline (always visible) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--bg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <!-- Filled overlay, clipped by --wr-rating-fill (0..1) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--fg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRating, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-rating', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrRating),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"wr-rating__row\"\n  role=\"slider\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"count()\"\n  [attr.aria-valuenow]=\"value() ?? 0\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"effectiveDisabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseleave)=\"onLeave()\"\n>\n  @for (slot of slots(); track $index) {\n    <!-- The parent row owns keyboard focus + handlers; slots are pointer-only\n         click targets, so the a11y rules below are intentionally suppressed. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <span\n      class=\"wr-rating__slot\"\n      [class.wr-rating__slot--interactive]=\"interactive()\"\n      [style.--wr-rating-fill]=\"fillFor($index)\"\n      (mousemove)=\"onSlotMove($event, $index)\"\n      (click)=\"onSlotClick($event, $index)\"\n    >\n      <!-- Outline (always visible) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--bg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <!-- Filled overlay, clipped by --wr-rating-fill (0..1) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--fg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n" }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrRating };
+//# sourceMappingURL=ngwr-rating.mjs.map

package/fesm2022/ngwr-rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-rating.mjs","sources":["../../../projects/lib/rating/rating.ts","../../../projects/lib/rating/rating.html","../../../projects/lib/rating/ngwr-rating.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, forwardRef, input, signal } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { clamp, noop } from 'ngwr/utils';\n\n/**\n * Star rating input. Click or hover to set a value; supports half-star\n * increments via `step=\"0.5\"`. Implements `ControlValueAccessor` — value\n * is `number | null` (clamped to `[0, count]`).\n *\n * Keyboard: `←` / `→` bump by `step`, `Home` / `End` jump to 0 / max.\n * Clicking the current value clears it (toggle off).\n *\n * @example\n * ```html\n * <wr-rating [(ngModel)]=\"score\" />\n * <wr-rating [(ngModel)]=\"score\" [count]=\"10\" step=\"0.5\" />\n * <wr-rating [ngModel]=\"4.5\" [readonly]=\"true\" />\n * ```\n *\n * @see https://ngwr.dev/components/rating\n */\n@Component({\n  selector: 'wr-rating',\n  templateUrl: './rating.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrRating),\n      multi: true,\n    },\n  ],\n})\nexport class WrRating implements ControlValueAccessor {\n  /** Total number of slots. @default 5 */\n  readonly count = input(5, { transform: (v: unknown): number => Math.max(1, coerceNumberProperty(v, 5)) });\n\n  /** Step granularity — `1` for whole stars, `0.5` for halves. @default 1 */\n  readonly step = input(1 as 0.5 | 1, {\n    transform: (v: unknown): 0.5 | 1 => (Number(v) === 0.5 ? 0.5 : 1),\n  });\n\n  /** Read-only — value is displayed but not interactive. @default false */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Accessible label. @default 'Rating' */\n  readonly ariaLabel = input<string>('Rating');\n\n  /** Last committed value (mirrored from the CVA). */\n  protected readonly value = signal<number | null>(null);\n\n  /** Transient hover preview — overrides `value` for display when set. */\n  protected readonly hoverValue = signal<number | null>(null);\n\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly interactive = computed(() => !this.effectiveDisabled() && !this.readonly());\n\n  /** What we actually render — hover wins while hovering. */\n  protected readonly displayValue = computed(() => this.hoverValue() ?? this.value() ?? 0);\n\n  protected readonly slots = computed(() => Array.from({ length: this.count() }, (_, i) => i));\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-rating'];\n    if (this.readonly()) parts.push('wr-rating--readonly');\n    if (this.effectiveDisabled()) parts.push('wr-rating--disabled');\n    return parts.join(' ');\n  });\n\n  /** Fill ratio for slot `i` in `[0, 1]` — drives the CSS clip width. */\n  protected fillFor(i: number): number {\n    return clamp(this.displayValue() - i, 0, 1);\n  }\n\n  // ControlValueAccessor\n\n  private onChange: (value: number | null) => void = noop;\n  private onTouched: () => void = noop;\n\n  writeValue(value: number | null): void {\n    this.value.set(value === null || value === undefined ? null : clamp(Number(value), 0, this.count()));\n  }\n\n  registerOnChange(fn: (value: number | null) => 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.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Template handlers\n\n  protected onSlotMove(event: MouseEvent, index: number): void {\n    if (!this.interactive()) return;\n    this.hoverValue.set(this.computeValue(event, index));\n  }\n\n  protected onLeave(): void {\n    this.hoverValue.set(null);\n  }\n\n  protected onSlotClick(event: MouseEvent, index: number): void {\n    if (!this.interactive()) return;\n    const next = this.computeValue(event, index);\n    // Click the current value → clear it.\n    const final = next === this.value() ? null : next;\n    this.commit(final);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    const max = this.count();\n    const step = this.step();\n    const current = this.value() ?? 0;\n    let next: number | null;\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = clamp(current + step, 0, max);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = clamp(current - step, 0, max);\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = max;\n        break;\n      case 'Delete':\n      case 'Backspace':\n        next = null;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.commit(next);\n  }\n\n  // Internals\n\n  /** Convert a mouse position over slot `index` to a snapped value. */\n  private computeValue(event: MouseEvent, index: number): number {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = index + ratio;\n    const step = this.step();\n    const snapped = Math.ceil(raw / step) * step;\n    return clamp(snapped, step, this.count());\n  }\n\n  private commit(value: number | null): void {\n    this.value.set(value);\n    this.hoverValue.set(null);\n    this.onChange(value);\n    this.onTouched();\n  }\n}\n","<div\n  class=\"wr-rating__row\"\n  role=\"slider\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"count()\"\n  [attr.aria-valuenow]=\"value() ?? 0\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"effectiveDisabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseleave)=\"onLeave()\"\n>\n  @for (slot of slots(); track $index) {\n    <!-- The parent row owns keyboard focus + handlers; slots are pointer-only\n         click targets, so the a11y rules below are intentionally suppressed. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <span\n      class=\"wr-rating__slot\"\n      [class.wr-rating__slot--interactive]=\"interactive()\"\n      [style.--wr-rating-fill]=\"fillFor($index)\"\n      (mousemove)=\"onSlotMove($event, $index)\"\n      (click)=\"onSlotClick($event, $index)\"\n    >\n      <!-- Outline (always visible) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--bg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <!-- Filled overlay, clipped by --wr-rating-fill (0..1) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--fg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-result.mjs

@@ -0,0 +1,119 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Large-illustration result / empty-state. Use after a successful action,
+ * for empty list states, or 404 / 500 pages.
+ *
+ * @example
+ * ```html
+ * <wr-result status="success" title="Submitted!" description="We'll be in touch.">
+ *   <button wrButton color="primary" wrResultExtra>Continue</button>
+ * </wr-result>
+ *
+ * <wr-result status="empty" title="No projects yet">
+ *   <button wrButton wrResultExtra>Create one</button>
+ * </wr-result>
+ * ```
+ *
+ * @see https://ngwr.dev/components/result
+ */
+class WrResult {
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    status = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `wr-result wr-result--${this.status()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrResult, isStandalone: true, selector: "wr-result", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-result__icon\" aria-hidden=\"true\">\n  @switch (status()) {\n    @case ('success') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M20 32 L28 40 L44 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 18 L32 36 M32 44 L32 46\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('error') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M22 22 L42 42 M42 22 L22 42\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('empty') {\n      <svg width=\"72\" height=\"56\" viewBox=\"0 0 72 56\">\n        <rect x=\"6\" y=\"14\" width=\"60\" height=\"36\" rx=\"4\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path d=\"M6 26 L36 26 L40 20 L66 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n      </svg>\n    }\n    @default {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 20 L32 36 M32 42 L32 44\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  }\n</div>\n\n@if (title()) {\n  <h2 class=\"wr-result__title\">{{ title() }}</h2>\n}\n@if (description()) {\n  <p class=\"wr-result__description\">{{ description() }}</p>\n}\n\n<div class=\"wr-result__extra\">\n  <ng-content select=\"[wrResultExtra]\" />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-result', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div class=\"wr-result__icon\" aria-hidden=\"true\">\n  @switch (status()) {\n    @case ('success') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M20 32 L28 40 L44 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 18 L32 36 M32 44 L32 46\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('error') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M22 22 L42 42 M42 22 L22 42\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('empty') {\n      <svg width=\"72\" height=\"56\" viewBox=\"0 0 72 56\">\n        <rect x=\"6\" y=\"14\" width=\"60\" height=\"36\" rx=\"4\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path d=\"M6 26 L36 26 L40 20 L66 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n      </svg>\n    }\n    @default {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 20 L32 36 M32 42 L32 44\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  }\n</div>\n\n@if (title()) {\n  <h2 class=\"wr-result__title\">{{ title() }}</h2>\n}\n@if (description()) {\n  <p class=\"wr-result__description\">{{ description() }}</p>\n}\n\n<div class=\"wr-result__extra\">\n  <ng-content select=\"[wrResultExtra]\" />\n</div>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Pre-set 404 result. Override `title` / `description` for localisation.
+ *
+ * @example
+ * ```html
+ * <wr-result-404>
+ *   <button wrButton wrResultExtra>Back home</button>
+ * </wr-result-404>
+ * ```
+ */
+class WrResult404 {
+    title = input('404', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input("Sorry, the page you visited doesn't exist.", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult404, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrResult404, isStandalone: true, selector: "wr-result-404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<wr-result status="warning" [title]="title()" [description]="description()"><ng-content /></wr-result>`, isInline: true, dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult404, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-result-404',
+                    template: `<wr-result status="warning" [title]="title()" [description]="description()"><ng-content /></wr-result>`,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [WrResult],
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+/** Pre-set 403 result — forbidden / no access. */
+class WrResult403 {
+    title = input('403', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input("Sorry, you're not authorized to view this page.", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult403, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrResult403, isStandalone: true, selector: "wr-result-403", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<wr-result status="error" [title]="title()" [description]="description()"><ng-content /></wr-result>`, isInline: true, dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult403, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-result-403',
+                    template: `<wr-result status="error" [title]="title()" [description]="description()"><ng-content /></wr-result>`,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [WrResult],
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+/** Pre-set 500 result — internal server error. */
+class WrResult500 {
+    title = input('500', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('Sorry, something went wrong.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult500, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrResult500, isStandalone: true, selector: "wr-result-500", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<wr-result status="error" [title]="title()" [description]="description()"><ng-content /></wr-result>`, isInline: true, dependencies: [{ kind: "component", type: WrResult, selector: "wr-result", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrResult500, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-result-500',
+                    template: `<wr-result status="error" [title]="title()" [description]="description()"><ng-content /></wr-result>`,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [WrResult],
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrResult, WrResult403, WrResult404, WrResult500 };
+//# sourceMappingURL=ngwr-result.mjs.map

package/fesm2022/ngwr-result.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-result.mjs","sources":["../../../projects/lib/result/result.ts","../../../projects/lib/result/result.html","../../../projects/lib/result/presets.ts","../../../projects/lib/result/ngwr-result.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrResultStatus } from './interfaces';\n\n/**\n * Large-illustration result / empty-state. Use after a successful action,\n * for empty list states, or 404 / 500 pages.\n *\n * @example\n * ```html\n * <wr-result status=\"success\" title=\"Submitted!\" description=\"We'll be in touch.\">\n *   <button wrButton color=\"primary\" wrResultExtra>Continue</button>\n * </wr-result>\n *\n * <wr-result status=\"empty\" title=\"No projects yet\">\n *   <button wrButton wrResultExtra>Create one</button>\n * </wr-result>\n * ```\n *\n * @see https://ngwr.dev/components/result\n */\n@Component({\n  selector: 'wr-result',\n  templateUrl: './result.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrResult {\n  readonly title = input<string>('');\n  readonly description = input<string>('');\n  readonly status = input<WrResultStatus>('info');\n\n  protected readonly classes = computed(() => `wr-result wr-result--${this.status()}`);\n}\n\nexport type { WrResultStatus } from './interfaces';\n","<div class=\"wr-result__icon\" aria-hidden=\"true\">\n  @switch (status()) {\n    @case ('success') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M20 32 L28 40 L44 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 18 L32 36 M32 44 L32 46\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('error') {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M22 22 L42 42 M42 22 L22 42\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n    @case ('empty') {\n      <svg width=\"72\" height=\"56\" viewBox=\"0 0 72 56\">\n        <rect x=\"6\" y=\"14\" width=\"60\" height=\"36\" rx=\"4\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path d=\"M6 26 L36 26 L40 20 L66 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n      </svg>\n    }\n    @default {\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"28\" fill=\"currentColor\" opacity=\"0.12\" />\n        <path\n          d=\"M32 20 L32 36 M32 42 L32 44\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  }\n</div>\n\n@if (title()) {\n  <h2 class=\"wr-result__title\">{{ title() }}</h2>\n}\n@if (description()) {\n  <p class=\"wr-result__description\">{{ description() }}</p>\n}\n\n<div class=\"wr-result__extra\">\n  <ng-content select=\"[wrResultExtra]\" />\n</div>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { WrResult } from './result';\n\n/**\n * Pre-set 404 result. Override `title` / `description` for localisation.\n *\n * @example\n * ```html\n * <wr-result-404>\n *   <button wrButton wrResultExtra>Back home</button>\n * </wr-result-404>\n * ```\n */\n@Component({\n  selector: 'wr-result-404',\n  template: `<wr-result status=\"warning\" [title]=\"title()\" [description]=\"description()\"><ng-content /></wr-result>`,\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrResult],\n})\nexport class WrResult404 {\n  readonly title = input<string>('404');\n  readonly description = input<string>(\"Sorry, the page you visited doesn't exist.\");\n}\n\n/** Pre-set 403 result — forbidden / no access. */\n@Component({\n  selector: 'wr-result-403',\n  template: `<wr-result status=\"error\" [title]=\"title()\" [description]=\"description()\"><ng-content /></wr-result>`,\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrResult],\n})\nexport class WrResult403 {\n  readonly title = input<string>('403');\n  readonly description = input<string>(\"Sorry, you're not authorized to view this page.\");\n}\n\n/** Pre-set 500 result — internal server error. */\n@Component({\n  selector: 'wr-result-500',\n  template: `<wr-result status=\"error\" [title]=\"title()\" [description]=\"description()\"><ng-content /></wr-result>`,\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrResult],\n})\nexport class WrResult500 {\n  readonly title = input<string>('500');\n  readonly description = input<string>('Sorry, something went wrong.');\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}