import { h } from "@stencil/core";
/**
 * Watermark 水印组件
 * 在内容之上平铺一层文字水印，常用于版权/防泄密标识
 */
export class Watermark {
    host;
    /** 水印文字 */
    content = '';
    /** 单个水印单元宽度 */
    width = 120;
    /** 单个水印单元高度 */
    height = 120;
    /** 水印单元之间的间距 */
    gap = 8;
    /** 旋转角度 */
    rotate = -22;
    /** 字体颜色 */
    fontColor = 'rgba(0,0,0,0.15)';
    /** 字号 */
    fontSize = 14;
    get backgroundImage() {
        const { width, height, content, fontColor, fontSize, rotate } = this;
        const safeText = this.escapeXml(content || '');
        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><text x="50%" y="50%" dy="${fontSize / 4}" text-anchor="middle" fill="${fontColor}" font-size="${fontSize}" font-family="sans-serif" transform="rotate(${rotate} ${width / 2} ${height / 2})">${safeText}</text></svg>`;
        return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
    }
    escapeXml(input) {
        return input
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;');
    }
    get layerStyle() {
        const { backgroundImage, width, height, gap } = this;
        return {
            backgroundImage,
            backgroundRepeat: 'repeat',
            backgroundSize: `${width + gap}px ${height + gap}px`,
        };
    }
    render() {
        return (h("div", { key: '558715dfd1fb81bab3dace29384aedaf21695cdf', class: "hb-watermark" }, h("div", { key: '26c580f3327e7018425c5e4556b19c9947212ae9', class: "hb-watermark__content" }, h("slot", { key: 'ff91c80742bd753daeef67c4b50b5d2cfec8d4b9' })), h("div", { key: 'c1dc15846f1e6ffa9d0ee968f87deb342bd13176', class: "hb-watermark__layer", style: this.layerStyle, "aria-hidden": "true" })));
    }
    static get is() { return "hb-watermark"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["watermark.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["watermark.css"]
        };
    }
    static get properties() {
        return {
            "content": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6C34\u5370\u6587\u5B57"
                },
                "getter": false,
                "setter": false,
                "attribute": "content",
                "reflect": false,
                "defaultValue": "''"
            },
            "width": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5355\u4E2A\u6C34\u5370\u5355\u5143\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false,
                "defaultValue": "120"
            },
            "height": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5355\u4E2A\u6C34\u5370\u5355\u5143\u9AD8\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "height",
                "reflect": false,
                "defaultValue": "120"
            },
            "gap": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6C34\u5370\u5355\u5143\u4E4B\u95F4\u7684\u95F4\u8DDD"
                },
                "getter": false,
                "setter": false,
                "attribute": "gap",
                "reflect": false,
                "defaultValue": "8"
            },
            "rotate": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u65CB\u8F6C\u89D2\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "rotate",
                "reflect": false,
                "defaultValue": "-22"
            },
            "fontColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5B57\u4F53\u989C\u8272"
                },
                "getter": false,
                "setter": false,
                "attribute": "font-color",
                "reflect": false,
                "defaultValue": "'rgba(0,0,0,0.15)'"
            },
            "fontSize": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5B57\u53F7"
                },
                "getter": false,
                "setter": false,
                "attribute": "font-size",
                "reflect": false,
                "defaultValue": "14"
            }
        };
    }
    static get elementRef() { return "host"; }
}
//# sourceMappingURL=Watermark.js.map
