@fluid-topics/ft-wc-utils 1.3.12 → 1.3.13

package/build/directives/index.d.ts

@@ -0,0 +1 @@
+export * from "./whenSize";

package/build/directives/index.js

@@ -0,0 +1 @@
+export * from "./whenSize";

package/build/directives/whenSize.d.ts

@@ -0,0 +1,24 @@
+import { AsyncDirective, PartInfo } from "lit/async-directive.js";
+import { Part } from "lit";
+export declare enum Breakpoint {
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl"
+}
+export declare class WhenSizeDirective extends AsyncDirective {
+    private size;
+    private lastArgs?;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    reconnected(): void;
+    private readonly onResize;
+    update(_: Part, [threshold, aboveRenderer, belowRenderer]: Parameters<WhenSizeDirective["render"]>): unknown;
+    render(thresholdOrBreakpoint: number | Breakpoint, aboveRenderer: () => unknown, maybeBelowRenderer?: () => unknown): unknown;
+    private resolveThreshold;
+}
+export interface WhenSizeDirectiveFn {
+    (threshold: number, aboveRenderer: () => unknown, belowRenderer?: () => unknown): unknown;
+    (breakpoint: Breakpoint, aboveRenderer: () => unknown, belowRenderer?: () => unknown): unknown;
+}
+export declare const whenSize: WhenSizeDirectiveFn;

package/build/directives/whenSize.js

@@ -0,0 +1,55 @@
+import { AsyncDirective, directive } from "lit/async-directive.js";
+import { nothing } from "lit";
+export var Breakpoint;
+(function (Breakpoint) {
+    Breakpoint["sm"] = "sm";
+    Breakpoint["md"] = "md";
+    Breakpoint["lg"] = "lg";
+    Breakpoint["xl"] = "xl";
+})(Breakpoint || (Breakpoint = {}));
+const BREAKPOINT_THRESHOLDS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+};
+export class WhenSizeDirective extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.size = 0;
+        this.onResize = () => {
+            const newSize = window.innerWidth;
+            if (this.size !== newSize) {
+                this.size = newSize;
+                // Force the directive to re-render
+                if (this.lastArgs) {
+                    this.setValue(this.render(...this.lastArgs));
+                }
+            }
+        };
+        this.size = window.innerWidth;
+        window.addEventListener("resize", this.onResize);
+    }
+    disconnected() {
+        window.removeEventListener("resize", this.onResize);
+    }
+    reconnected() {
+        window.addEventListener("resize", this.onResize);
+    }
+    update(_, [threshold, aboveRenderer, belowRenderer]) {
+        this.lastArgs = [threshold, aboveRenderer, belowRenderer];
+        return this.render(threshold, aboveRenderer, belowRenderer);
+    }
+    render(thresholdOrBreakpoint, aboveRenderer, maybeBelowRenderer) {
+        const threshold = this.resolveThreshold(thresholdOrBreakpoint);
+        const belowRenderer = maybeBelowRenderer !== null && maybeBelowRenderer !== void 0 ? maybeBelowRenderer : (() => nothing);
+        return this.size > threshold ? aboveRenderer() : belowRenderer();
+    }
+    resolveThreshold(arg) {
+        if (typeof arg === "number") {
+            return arg;
+        }
+        return BREAKPOINT_THRESHOLDS[arg];
+    }
+}
+export const whenSize = directive(WhenSizeDirective);