@fluid-topics/ft-content-watermark 1.4.5

package/README.md

@@ -0,0 +1,28 @@
+Generic component that overlays a watermark on top of FT content
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-content-watermark
+yarn add @fluid-topics/ft-content-watermark
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import { FtWatermark } from "@fluid-topics/public-api"
+import "@fluid-topics/ft-content-watermark"
+
+function render() {
+    const watermark: FtWatermark = {
+        color: "red",
+        opacity: 0.3,
+        text: ["Internal use only"],
+    }
+    return html`
+        <ft-content-watermark .watermark=${ watermark }
+                              .heightReference=${ this.offsetParent }></ft-content-watermark>
+    `
+}
+```

package/build/ft-content-watermark.d.ts

@@ -0,0 +1,15 @@
+import { FtContentWatermarkProperties } from "./ft-content-watermark.properties";
+import { PropertyValues } from "lit";
+import { FtWatermark } from "@fluid-topics/public-api";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+export declare class FtContentWatermark extends FtLitElement implements FtContentWatermarkProperties {
+    svg: SVGSVGElement;
+    watermark?: FtWatermark;
+    heightReference?: HTMLElement;
+    height: number;
+    static styles: import("lit").CSSResult[];
+    protected render(): unknown;
+    protected updated(props: PropertyValues<FtContentWatermark>): void;
+    private readonly resizeObserver;
+    disconnectedCallback(): void;
+}

package/build/ft-content-watermark.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg, } from "lit";
+import { property, query, state, } from "lit/decorators.js";
+import { styles } from "./ft-content-watermark.styles";
+import { repeat } from "lit/directives/repeat.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyBody1 } from "@fluid-topics/ft-typography";
+class FtContentWatermark extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.height = 0;
+        this.resizeObserver = new ResizeObserver(([reference]) => {
+            this.height = Math.min(reference.contentRect.height, reference.contentRect.width);
+        });
+    }
+    render() {
+        var _a, _b, _c;
+        return this.watermark ? html `
+            <style>
+                .ft-watermark {
+                    height: ${this.height}px;
+                }
+            </style>
+            <div class="ft-watermark-container ft-typography--body1">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     class="ft-watermark"
+                     part="svg">
+                    <text x="0" y="0"
+                          text-anchor="middle"
+                          transform="rotate(-45)"
+                          fill="${(_a = this.watermark) === null || _a === void 0 ? void 0 : _a.color}"
+                          fill-opacity="${(_b = this.watermark) === null || _b === void 0 ? void 0 : _b.opacity}%">
+                        ${repeat(((_c = this.watermark) === null || _c === void 0 ? void 0 : _c.text) || [], (item) => svg `<tspan x="0" dy="1.2em">${item}</tspan>`)}
+                    </text>
+                </svg>
+            </div>
+        ` : nothing;
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has("watermark") && this.watermark) {
+            const bbox = this.svg.getBBox({ stroke: true });
+            this.svg.setAttribute("viewBox", bbox.x + " " + bbox.y + " " + bbox.width + " " + bbox.height);
+        }
+        if (props.has("heightReference") && this.heightReference) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver.observe(this.heightReference);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.disconnect();
+    }
+}
+FtContentWatermark.styles = [styles, FtTypographyBody1];
+__decorate([
+    query(".ft-watermark")
+], FtContentWatermark.prototype, "svg", void 0);
+__decorate([
+    property({ attribute: false })
+], FtContentWatermark.prototype, "watermark", void 0);
+__decorate([
+    property({ attribute: false })
+], FtContentWatermark.prototype, "heightReference", void 0);
+__decorate([
+    state()
+], FtContentWatermark.prototype, "height", void 0);
+export { FtContentWatermark };