ngwr 7.2.0 → 8.0.0

package/fesm2022/ngwr-click-spark.mjs

@@ -36,8 +36,13 @@ const EASINGS = {
  * @see https://www.reactbits.dev/animations/click-spark
  */
 class WrClickSpark {
-    /** Spark line colour. @default '#fff' */
-    sparkColor = input('#fff', /* @ts-ignore */
+    /**
+     * Spark line colour. Accepts any CSS colour, or a `var(--wr-…)` token which is
+     * resolved against the host so it tracks the theme. The default flips with the
+     * theme — dark sparks in light mode, light sparks in dark.
+     * @default 'var(--wr-color-dark)'
+     */
+    sparkColor = input('var(--wr-color-dark)', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sparkColor" }] : /* istanbul ignore next */ []));
     /** Length of each spark line in pixels (at t=0; tapers to 0 at t=1). @default 10 */
     sparkSize = input(10, { ...(ngDevMode ? { debugName: "sparkSize" } : /* istanbul ignore next */ {}), transform: numAttr(10) });
@@ -82,6 +87,20 @@ class WrClickSpark {
         }
     }
     // Internals
+    /**
+     * Canvas `strokeStyle` can't read CSS custom properties, so a `var(--wr-…)`
+     * token is resolved against the host's computed style here. Plain colours
+     * pass through untouched. Falls back to a dark literal if the custom
+     * property resolves to nothing.
+     */
+    resolveColor() {
+        const color = this.sparkColor();
+        const match = /^var\((--[\w-]+)\)$/.exec(color.trim());
+        if (!match)
+            return color;
+        const resolved = getComputedStyle(this.host.nativeElement).getPropertyValue(match[1]).trim();
+        return resolved || '#0f172a';
+    }
     syncCanvasSize() {
         const canvas = this.canvasRef().nativeElement;
         const host = this.host.nativeElement;
@@ -118,7 +137,7 @@ class WrClickSpark {
             const sparkRadius = this.sparkRadius();
             const sparkSize = this.sparkSize();
             const extraScale = this.extraScale();
-            const color = this.sparkColor();
+            const color = this.resolveColor();
             this.sparks = this.sparks.filter(spark => {
                 const elapsed = ts - spark.startTime;
                 if (elapsed >= duration)
@@ -144,10 +163,10 @@ class WrClickSpark {
         raf = requestAnimationFrame(draw);
         this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrClickSpark, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrClickSpark, isStandalone: true, selector: "wr-click-spark", inputs: { sparkColor: { classPropertyName: "sparkColor", publicName: "sparkColor", isSignal: true, isRequired: false, transformFunction: null }, sparkSize: { classPropertyName: "sparkSize", publicName: "sparkSize", isSignal: true, isRequired: false, transformFunction: null }, sparkRadius: { classPropertyName: "sparkRadius", publicName: "sparkRadius", isSignal: true, isRequired: false, transformFunction: null }, sparkCount: { classPropertyName: "sparkCount", publicName: "sparkCount", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, extraScale: { classPropertyName: "extraScale", publicName: "extraScale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "wr-click-spark" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas #canvas class=\"wr-click-spark__canvas\"></canvas>\n<ng-content />\n", styles: [".wr-click-spark{position:relative;display:block}.wr-click-spark__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrClickSpark, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: WrClickSpark, isStandalone: true, selector: "wr-click-spark", inputs: { sparkColor: { classPropertyName: "sparkColor", publicName: "sparkColor", isSignal: true, isRequired: false, transformFunction: null }, sparkSize: { classPropertyName: "sparkSize", publicName: "sparkSize", isSignal: true, isRequired: false, transformFunction: null }, sparkRadius: { classPropertyName: "sparkRadius", publicName: "sparkRadius", isSignal: true, isRequired: false, transformFunction: null }, sparkCount: { classPropertyName: "sparkCount", publicName: "sparkCount", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, extraScale: { classPropertyName: "extraScale", publicName: "extraScale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "wr-click-spark" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas #canvas class=\"wr-click-spark__canvas\"></canvas>\n<ng-content />\n", styles: [".wr-click-spark{position:relative;display:block}.wr-click-spark__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrClickSpark, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrClickSpark, decorators: [{
             type: Component,
             args: [{ selector: 'wr-click-spark', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-click-spark',

package/fesm2022/ngwr-click-spark.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-click-spark.mjs","sources":["../../../projects/lib/click-spark/click-spark.ts","../../../projects/lib/click-spark/click-spark.html","../../../projects/lib/click-spark/ngwr-click-spark.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 * Angular adaptation of the ClickSpark effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/click-spark\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrClickSparkEasing } from './interfaces';\n\ninterface Spark {\n  readonly x: number;\n  readonly y: number;\n  readonly angle: number;\n  readonly startTime: number;\n}\n\nconst EASINGS: Readonly<Record<WrClickSparkEasing, (t: number) => number>> = {\n  linear: t => t,\n  'ease-in': t => t * t,\n  'ease-in-out': t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n  'ease-out': t => t * (2 - t),\n};\n\n/**\n * Click ripple — bursts a ring of short line sparks from the click point\n * across any projected content. Wraps children in a positioned container\n * with a `pointer-events: none` canvas overlay, so projected DOM stays\n * fully interactive.\n *\n * @example\n * ```html\n * <wr-click-spark>\n *   <h1>Click anywhere</h1>\n *   <button>Buttons still work</button>\n * </wr-click-spark>\n * ```\n *\n * @see https://www.reactbits.dev/animations/click-spark\n */\n@Component({\n  selector: 'wr-click-spark',\n  templateUrl: './click-spark.html',\n  styleUrl: './click-spark.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-click-spark',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class WrClickSpark {\n  /** Spark line colour. @default '#fff' */\n  readonly sparkColor = input('#fff');\n\n  /** Length of each spark line in pixels (at t=0; tapers to 0 at t=1). @default 10 */\n  readonly sparkSize = input(10, { transform: numAttr(10) });\n\n  /** Distance each spark travels from origin in pixels. @default 15 */\n  readonly sparkRadius = input(15, { transform: numAttr(15) });\n\n  /** Number of sparks per click (evenly distributed around the circle). @default 8 */\n  readonly sparkCount = input(8, { transform: numAttr(8) });\n\n  /** Animation duration in ms. @default 400 */\n  readonly duration = input(400, { transform: numAttr(400) });\n\n  /** Easing function applied to the travel distance. @default 'ease-out' */\n  readonly easing = input<WrClickSparkEasing>('ease-out');\n\n  /** Multiplier on the travel distance — bumps the radius without changing `sparkRadius`. @default 1 */\n  readonly extraScale = input(1, { transform: numAttr(1) });\n\n  private readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private sparks: Spark[] = [];\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => {\n      this.syncCanvasSize();\n      this.watchResize();\n      this.startLoop();\n    });\n  }\n\n  protected onClick(event: MouseEvent): void {\n    // Reduced motion: no spark bursts — same policy as wr-confetti.\n    if (this.platform.prefersReducedMotion()) return;\n    const canvas = this.canvasRef().nativeElement;\n    const rect = canvas.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    const now = performance.now();\n    const count = this.sparkCount();\n    for (let i = 0; i < count; i++) {\n      this.sparks.push({ x, y, angle: (2 * Math.PI * i) / count, startTime: now });\n    }\n  }\n\n  // Internals\n\n  private syncCanvasSize(): void {\n    const canvas = this.canvasRef().nativeElement;\n    const host = this.host.nativeElement;\n    const { width, height } = host.getBoundingClientRect();\n    if (canvas.width !== Math.round(width)) canvas.width = Math.round(width);\n    if (canvas.height !== Math.round(height)) canvas.height = Math.round(height);\n  }\n\n  private watchResize(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n    let resizeTimer: ReturnType<typeof setTimeout> | undefined;\n    const ro = new ResizeObserver(() => {\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(() => this.syncCanvasSize(), 100);\n    });\n    ro.observe(this.host.nativeElement);\n    this.destroyRef.onDestroy(() => {\n      ro.disconnect();\n      clearTimeout(resizeTimer);\n    });\n  }\n\n  private startLoop(): void {\n    const canvas = this.canvasRef().nativeElement;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    let raf = 0;\n\n    const draw = (ts: number): void => {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      const ease = EASINGS[this.easing()];\n      const duration = this.duration();\n      const sparkRadius = this.sparkRadius();\n      const sparkSize = this.sparkSize();\n      const extraScale = this.extraScale();\n      const color = this.sparkColor();\n\n      this.sparks = this.sparks.filter(spark => {\n        const elapsed = ts - spark.startTime;\n        if (elapsed >= duration) return false;\n        const progress = elapsed / duration;\n        const eased = ease(progress);\n        const distance = eased * sparkRadius * extraScale;\n        const lineLength = sparkSize * (1 - eased);\n\n        const x1 = spark.x + distance * Math.cos(spark.angle);\n        const y1 = spark.y + distance * Math.sin(spark.angle);\n        const x2 = spark.x + (distance + lineLength) * Math.cos(spark.angle);\n        const y2 = spark.y + (distance + lineLength) * Math.sin(spark.angle);\n\n        ctx.strokeStyle = color;\n        ctx.lineWidth = 2;\n        ctx.beginPath();\n        ctx.moveTo(x1, y1);\n        ctx.lineTo(x2, y2);\n        ctx.stroke();\n        return true;\n      });\n\n      raf = requestAnimationFrame(draw);\n    };\n\n    raf = requestAnimationFrame(draw);\n    this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));\n  }\n}\n\nexport type { WrClickSparkEasing } from './interfaces';\n","<canvas #canvas class=\"wr-click-spark__canvas\"></canvas>\n<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-click-spark.mjs","sources":["../../../projects/lib/click-spark/click-spark.ts","../../../projects/lib/click-spark/click-spark.html","../../../projects/lib/click-spark/ngwr-click-spark.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 * Angular adaptation of the ClickSpark effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/click-spark\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrClickSparkEasing } from './interfaces';\n\ninterface Spark {\n  readonly x: number;\n  readonly y: number;\n  readonly angle: number;\n  readonly startTime: number;\n}\n\nconst EASINGS: Readonly<Record<WrClickSparkEasing, (t: number) => number>> = {\n  linear: t => t,\n  'ease-in': t => t * t,\n  'ease-in-out': t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n  'ease-out': t => t * (2 - t),\n};\n\n/**\n * Click ripple — bursts a ring of short line sparks from the click point\n * across any projected content. Wraps children in a positioned container\n * with a `pointer-events: none` canvas overlay, so projected DOM stays\n * fully interactive.\n *\n * @example\n * ```html\n * <wr-click-spark>\n *   <h1>Click anywhere</h1>\n *   <button>Buttons still work</button>\n * </wr-click-spark>\n * ```\n *\n * @see https://www.reactbits.dev/animations/click-spark\n */\n@Component({\n  selector: 'wr-click-spark',\n  templateUrl: './click-spark.html',\n  styleUrl: './click-spark.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-click-spark',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class WrClickSpark {\n  /**\n   * Spark line colour. Accepts any CSS colour, or a `var(--wr-…)` token which is\n   * resolved against the host so it tracks the theme. The default flips with the\n   * theme — dark sparks in light mode, light sparks in dark.\n   * @default 'var(--wr-color-dark)'\n   */\n  readonly sparkColor = input('var(--wr-color-dark)');\n\n  /** Length of each spark line in pixels (at t=0; tapers to 0 at t=1). @default 10 */\n  readonly sparkSize = input(10, { transform: numAttr(10) });\n\n  /** Distance each spark travels from origin in pixels. @default 15 */\n  readonly sparkRadius = input(15, { transform: numAttr(15) });\n\n  /** Number of sparks per click (evenly distributed around the circle). @default 8 */\n  readonly sparkCount = input(8, { transform: numAttr(8) });\n\n  /** Animation duration in ms. @default 400 */\n  readonly duration = input(400, { transform: numAttr(400) });\n\n  /** Easing function applied to the travel distance. @default 'ease-out' */\n  readonly easing = input<WrClickSparkEasing>('ease-out');\n\n  /** Multiplier on the travel distance — bumps the radius without changing `sparkRadius`. @default 1 */\n  readonly extraScale = input(1, { transform: numAttr(1) });\n\n  private readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private sparks: Spark[] = [];\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => {\n      this.syncCanvasSize();\n      this.watchResize();\n      this.startLoop();\n    });\n  }\n\n  protected onClick(event: MouseEvent): void {\n    // Reduced motion: no spark bursts — same policy as wr-confetti.\n    if (this.platform.prefersReducedMotion()) return;\n    const canvas = this.canvasRef().nativeElement;\n    const rect = canvas.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    const now = performance.now();\n    const count = this.sparkCount();\n    for (let i = 0; i < count; i++) {\n      this.sparks.push({ x, y, angle: (2 * Math.PI * i) / count, startTime: now });\n    }\n  }\n\n  // Internals\n\n  /**\n   * Canvas `strokeStyle` can't read CSS custom properties, so a `var(--wr-…)`\n   * token is resolved against the host's computed style here. Plain colours\n   * pass through untouched. Falls back to a dark literal if the custom\n   * property resolves to nothing.\n   */\n  private resolveColor(): string {\n    const color = this.sparkColor();\n    const match = /^var\\((--[\\w-]+)\\)$/.exec(color.trim());\n    if (!match) return color;\n    const resolved = getComputedStyle(this.host.nativeElement).getPropertyValue(match[1]).trim();\n    return resolved || '#0f172a';\n  }\n\n  private syncCanvasSize(): void {\n    const canvas = this.canvasRef().nativeElement;\n    const host = this.host.nativeElement;\n    const { width, height } = host.getBoundingClientRect();\n    if (canvas.width !== Math.round(width)) canvas.width = Math.round(width);\n    if (canvas.height !== Math.round(height)) canvas.height = Math.round(height);\n  }\n\n  private watchResize(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n    let resizeTimer: ReturnType<typeof setTimeout> | undefined;\n    const ro = new ResizeObserver(() => {\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(() => this.syncCanvasSize(), 100);\n    });\n    ro.observe(this.host.nativeElement);\n    this.destroyRef.onDestroy(() => {\n      ro.disconnect();\n      clearTimeout(resizeTimer);\n    });\n  }\n\n  private startLoop(): void {\n    const canvas = this.canvasRef().nativeElement;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    let raf = 0;\n\n    const draw = (ts: number): void => {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      const ease = EASINGS[this.easing()];\n      const duration = this.duration();\n      const sparkRadius = this.sparkRadius();\n      const sparkSize = this.sparkSize();\n      const extraScale = this.extraScale();\n      const color = this.resolveColor();\n\n      this.sparks = this.sparks.filter(spark => {\n        const elapsed = ts - spark.startTime;\n        if (elapsed >= duration) return false;\n        const progress = elapsed / duration;\n        const eased = ease(progress);\n        const distance = eased * sparkRadius * extraScale;\n        const lineLength = sparkSize * (1 - eased);\n\n        const x1 = spark.x + distance * Math.cos(spark.angle);\n        const y1 = spark.y + distance * Math.sin(spark.angle);\n        const x2 = spark.x + (distance + lineLength) * Math.cos(spark.angle);\n        const y2 = spark.y + (distance + lineLength) * Math.sin(spark.angle);\n\n        ctx.strokeStyle = color;\n        ctx.lineWidth = 2;\n        ctx.beginPath();\n        ctx.moveTo(x1, y1);\n        ctx.lineTo(x2, y2);\n        ctx.stroke();\n        return true;\n      });\n\n      raf = requestAnimationFrame(draw);\n    };\n\n    raf = requestAnimationFrame(draw);\n    this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));\n  }\n}\n\nexport type { WrClickSparkEasing } from './interfaces';\n","<canvas #canvas class=\"wr-click-spark__canvas\"></canvas>\n<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-clipboard.mjs

@@ -77,11 +77,31 @@ class WrClipboard {
             return null;
         }
     }
-    /** Probe the Permissions API for `clipboard-read` / `clipboard-write`. */
+    /**
+     * Report whether clipboard read / write is available and, when the
+     * browser exposes it, what the user has granted.
+     *
+     * The answer is grounded in the actual Clipboard API capability
+     * (`writeText` / `readText`), then refined by the Permissions API when
+     * it can speak for the requested name. `clipboard-read` / `clipboard-write`
+     * are not recognised everywhere — Firefox and Safari throw on the query —
+     * so a missing or throwing Permissions API is treated as "supported,
+     * will resolve at use time" (`'prompt'`), not `'unsupported'`. We only
+     * return `'unsupported'` when the capability genuinely isn't there.
+     */
     async permission(name) {
         const view = this.doc.defaultView;
-        if (!view?.navigator?.permissions?.query)
+        if (!view)
             return 'unsupported';
+        const clipboard = view.navigator?.clipboard;
+        const capable = name === 'write'
+            ? typeof clipboard?.writeText === 'function' || typeof this.doc.execCommand === 'function'
+            : typeof clipboard?.readText === 'function';
+        if (!capable)
+            return 'unsupported';
+        // Capability exists; ask the Permissions API to refine the state when it can.
+        if (typeof view.navigator?.permissions?.query !== 'function')
+            return 'prompt';
         try {
             const status = await view.navigator.permissions.query({
                 name: `clipboard-${name}`,
@@ -89,7 +109,8 @@ class WrClipboard {
             return status.state;
         }
         catch {
-            return 'unsupported';
+            // Name not recognised by this browser — capability is still present.
+            return 'prompt';
         }
     }
     // Internals
@@ -115,10 +136,10 @@ class WrClipboard {
             this.doc.body.removeChild(node);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrClipboard, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: WrClipboard });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrClipboard, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: WrClipboard });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrClipboard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrClipboard, decorators: [{
             type: Service
         }] });
 

package/fesm2022/ngwr-clipboard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-clipboard.mjs","sources":["../../../projects/lib/clipboard/clipboard.ts","../../../projects/lib/clipboard/ngwr-clipboard.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 { DOCUMENT } from '@angular/common';\nimport { Service, inject } from '@angular/core';\n\nimport type { WrClipboardPermission } from './interfaces';\n\n/**\n * Programmatic clipboard read / write.\n *\n * - **Write** uses `navigator.clipboard.writeText` with a hidden\n *   `<textarea>` + `execCommand('copy')` fallback for non-secure contexts.\n * - **Read** uses `navigator.clipboard.readText` (no fallback — older\n *   browsers expose no equivalent).\n * - **Available** / **permission** check what the current browser allows\n *   so UI can disable the action when it would silently no-op.\n *\n * SSR-safe: every method short-circuits when there's no `document.defaultView`.\n *\n * @example\n * ```ts\n * const clip = inject(WrClipboard);\n *\n * await clip.write('Hello');           // resolves to true on success\n * const text = await clip.read();      // string | null\n * clip.available();                    // boolean\n * await clip.permission('write');      // 'granted' | 'denied' | 'prompt' | 'unsupported'\n * ```\n *\n * @see https://ngwr.dev/services/clipboard\n */\n@Service()\nexport class WrClipboard {\n  private readonly doc = inject(DOCUMENT);\n\n  /** Is any clipboard write path available (async API or `execCommand`)? */\n  available(): boolean {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n    if (view.navigator?.clipboard) return true;\n    return typeof this.doc.execCommand === 'function';\n  }\n\n  /**\n   * Write text. Resolves to `true` on success, `false` on failure (denied\n   * permission, no clipboard, etc).\n   */\n  async write(text: string): Promise<boolean> {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n\n    try {\n      if (view.navigator?.clipboard) {\n        await view.navigator.clipboard.writeText(text);\n        return true;\n      }\n      return this.legacyWrite(text);\n    } catch {\n      return this.legacyWrite(text);\n    }\n  }\n\n  /**\n   * Read text from the clipboard. Returns `null` when unsupported or\n   * when the user denied the permission prompt.\n   */\n  async read(): Promise<string | null> {\n    const view = this.doc.defaultView;\n    if (!view?.navigator?.clipboard?.readText) return null;\n    try {\n      return await view.navigator.clipboard.readText();\n    } catch {\n      return null;\n    }\n  }\n\n  /** Probe the Permissions API for `clipboard-read` / `clipboard-write`. */\n  async permission(name: 'read' | 'write'): Promise<WrClipboardPermission> {\n    const view = this.doc.defaultView;\n    if (!view?.navigator?.permissions?.query) return 'unsupported';\n    try {\n      const status = await view.navigator.permissions.query({\n        name: `clipboard-${name}` as PermissionName,\n      });\n      return status.state;\n    } catch {\n      return 'unsupported';\n    }\n  }\n\n  // Internals\n\n  /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */\n  private legacyWrite(text: string): boolean {\n    const node = this.doc.createElement('textarea');\n    node.value = text;\n    node.setAttribute('readonly', '');\n    node.style.position = 'fixed';\n    node.style.top = '0';\n    node.style.left = '0';\n    node.style.opacity = '0';\n    node.style.pointerEvents = 'none';\n    this.doc.body.appendChild(node);\n    node.select();\n    try {\n      return this.doc.execCommand('copy');\n    } catch {\n      return false;\n    } finally {\n      this.doc.body.removeChild(node);\n    }\n  }\n}\n\nexport type { WrClipboardPermission } from './interfaces';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;;;;;AAuBG;MAEU,WAAW,CAAA;AACL,IAAA,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC;;IAGvC,SAAS,GAAA;AACP,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,KAAK;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,SAAS;AAAE,YAAA,OAAO,IAAI;QAC1C,OAAO,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,UAAU;IACnD;AAEA;;;AAGG;IACH,MAAM,KAAK,CAAC,IAAY,EAAA;AACtB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,KAAK;AAEvB,QAAA,IAAI;AACF,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE;gBAC7B,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AAC9C,gBAAA,OAAO,IAAI;YACb;AACA,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B;IACF;AAEA;;;AAGG;AACH,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ;AAAE,YAAA,OAAO,IAAI;AACtD,QAAA,IAAI;YACF,OAAO,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,EAAE;QAClD;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;;IAGA,MAAM,UAAU,CAAC,IAAsB,EAAA;AACrC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK;AAAE,YAAA,OAAO,aAAa;AAC9D,QAAA,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,IAAI,EAAE,CAAA,UAAA,EAAa,IAAI,CAAA,CAAoB;AAC5C,aAAA,CAAC;YACF,OAAO,MAAM,CAAC,KAAK;QACrB;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,aAAa;QACtB;IACF;;;AAKQ,IAAA,WAAW,CAAC,IAAY,EAAA;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC;AAC/C,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO;AAC7B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG;AACrB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;AACxB,QAAA,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM;QACjC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B,IAAI,CAAC,MAAM,EAAE;AACb,QAAA,IAAI;YACF,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC;QACrC;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,KAAK;QACd;gBAAU;YACR,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACjC;IACF;uGA/EW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,OAAA,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBADvB;;;ACpCD;;AAEG;;;;"}
+{"version":3,"file":"ngwr-clipboard.mjs","sources":["../../../projects/lib/clipboard/clipboard.ts","../../../projects/lib/clipboard/ngwr-clipboard.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 { DOCUMENT } from '@angular/common';\nimport { Service, inject } from '@angular/core';\n\nimport type { WrClipboardPermission } from './interfaces';\n\n/**\n * Programmatic clipboard read / write.\n *\n * - **Write** uses `navigator.clipboard.writeText` with a hidden\n *   `<textarea>` + `execCommand('copy')` fallback for non-secure contexts.\n * - **Read** uses `navigator.clipboard.readText` (no fallback — older\n *   browsers expose no equivalent).\n * - **Available** / **permission** check what the current browser allows\n *   so UI can disable the action when it would silently no-op.\n *\n * SSR-safe: every method short-circuits when there's no `document.defaultView`.\n *\n * @example\n * ```ts\n * const clip = inject(WrClipboard);\n *\n * await clip.write('Hello');           // resolves to true on success\n * const text = await clip.read();      // string | null\n * clip.available();                    // boolean\n * await clip.permission('write');      // 'granted' | 'denied' | 'prompt' | 'unsupported'\n * ```\n *\n * @see https://ngwr.dev/services/clipboard\n */\n@Service()\nexport class WrClipboard {\n  private readonly doc = inject(DOCUMENT);\n\n  /** Is any clipboard write path available (async API or `execCommand`)? */\n  available(): boolean {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n    if (view.navigator?.clipboard) return true;\n    return typeof this.doc.execCommand === 'function';\n  }\n\n  /**\n   * Write text. Resolves to `true` on success, `false` on failure (denied\n   * permission, no clipboard, etc).\n   */\n  async write(text: string): Promise<boolean> {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n\n    try {\n      if (view.navigator?.clipboard) {\n        await view.navigator.clipboard.writeText(text);\n        return true;\n      }\n      return this.legacyWrite(text);\n    } catch {\n      return this.legacyWrite(text);\n    }\n  }\n\n  /**\n   * Read text from the clipboard. Returns `null` when unsupported or\n   * when the user denied the permission prompt.\n   */\n  async read(): Promise<string | null> {\n    const view = this.doc.defaultView;\n    if (!view?.navigator?.clipboard?.readText) return null;\n    try {\n      return await view.navigator.clipboard.readText();\n    } catch {\n      return null;\n    }\n  }\n\n  /**\n   * Report whether clipboard read / write is available and, when the\n   * browser exposes it, what the user has granted.\n   *\n   * The answer is grounded in the actual Clipboard API capability\n   * (`writeText` / `readText`), then refined by the Permissions API when\n   * it can speak for the requested name. `clipboard-read` / `clipboard-write`\n   * are not recognised everywhere — Firefox and Safari throw on the query —\n   * so a missing or throwing Permissions API is treated as \"supported,\n   * will resolve at use time\" (`'prompt'`), not `'unsupported'`. We only\n   * return `'unsupported'` when the capability genuinely isn't there.\n   */\n  async permission(name: 'read' | 'write'): Promise<WrClipboardPermission> {\n    const view = this.doc.defaultView;\n    if (!view) return 'unsupported';\n\n    const clipboard = view.navigator?.clipboard;\n    const capable =\n      name === 'write'\n        ? typeof clipboard?.writeText === 'function' || typeof this.doc.execCommand === 'function'\n        : typeof clipboard?.readText === 'function';\n    if (!capable) return 'unsupported';\n\n    // Capability exists; ask the Permissions API to refine the state when it can.\n    if (typeof view.navigator?.permissions?.query !== 'function') return 'prompt';\n    try {\n      const status = await view.navigator.permissions.query({\n        name: `clipboard-${name}` as PermissionName,\n      });\n      return status.state;\n    } catch {\n      // Name not recognised by this browser — capability is still present.\n      return 'prompt';\n    }\n  }\n\n  // Internals\n\n  /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */\n  private legacyWrite(text: string): boolean {\n    const node = this.doc.createElement('textarea');\n    node.value = text;\n    node.setAttribute('readonly', '');\n    node.style.position = 'fixed';\n    node.style.top = '0';\n    node.style.left = '0';\n    node.style.opacity = '0';\n    node.style.pointerEvents = 'none';\n    this.doc.body.appendChild(node);\n    node.select();\n    try {\n      return this.doc.execCommand('copy');\n    } catch {\n      return false;\n    } finally {\n      this.doc.body.removeChild(node);\n    }\n  }\n}\n\nexport type { WrClipboardPermission } from './interfaces';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-collapse.mjs

@@ -94,10 +94,10 @@ class WrCollapse {
             return;
         this.open.update(v => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrCollapse, isStandalone: true, selector: "wr-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrCollapse, isStandalone: true, selector: "wr-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCollapse, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapse, decorators: [{
             type: Component,
             args: [{ selector: 'wr-collapse', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -132,8 +132,8 @@ class WrCollapseGroup {
                 member.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCollapseGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrCollapseGroup, isStandalone: true, selector: "wr-collapse-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-collapse-group" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapseGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrCollapseGroup, isStandalone: true, selector: "wr-collapse-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-collapse-group" }, providers: [
             {
                 provide: WR_COLLAPSE_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -141,7 +141,7 @@ class WrCollapseGroup {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCollapseGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapseGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-collapse-group',
@@ -198,8 +198,8 @@ class WrAccordion {
                 member.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: WrAccordion, isStandalone: true, selector: "wr-accordion", host: { classAttribute: "wr-collapse-group wr-collapse-group--accordion" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: WrAccordion, isStandalone: true, selector: "wr-accordion", host: { classAttribute: "wr-collapse-group wr-collapse-group--accordion" }, providers: [
             {
                 provide: WR_COLLAPSE_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -207,7 +207,7 @@ class WrAccordion {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAccordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-accordion',

package/fesm2022/ngwr-color-picker.mjs

@@ -468,17 +468,17 @@ class WrColorPicker {
         this.a.set(hsv.a);
         this.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
                 useExisting: forwardRef(() => WrColorPicker),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled"], outputs: ["valueChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled", "size"], outputs: ["valueChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPicker, decorators: [{
             type: Component,
             args: [{ selector: 'wr-color-picker', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
@@ -627,10 +627,10 @@ class WrColorPickerTrigger {
             this.overlayRef = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrColorPickerTrigger]',