@fluid-topics/ft-copy-block 1.1.18

package/README.md

@@ -0,0 +1,19 @@
+Copy block
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-copy-block
+yarn add @fluid-topics/ft-copy-block
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-copy-block"
+
+function render() {
+    return html` <ft-copy-block><pre>window.alert("toto")</pre></ft-copy-block> `
+}
+```

package/build/CopyBlockComponentMessages.d.ts

@@ -0,0 +1,7 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface CopyBlockComponentMessages extends I18nMessages {
+    tooltipMessage(): string;
+    copySuccessMessage(): string;
+}
+export declare const copyBlock: I18nMessageContext<CopyBlockComponentMessages>;
+export declare const defaultCopyBlockMessages: DefaultI18nMessages<CopyBlockComponentMessages>;

package/build/CopyBlockComponentMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const copyBlock = I18nMessageContext.build("copyBlockComponent");
+export const defaultCopyBlockMessages = {
+    tooltipMessage: "Copy to clipboard",
+    copySuccessMessage: "Copied!",
+};

package/build/ft-copy-block.css.d.ts

@@ -0,0 +1,10 @@
+export declare const FtCopyBlockCssVariables: {
+    spacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    buttonHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-copy-block.css.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtCopyBlockCssVariables = {
+    spacing: FtCssVariableFactory.create("--ft-copy-block-spacing", "", "SIZE", "12px 48px 12px 12px"),
+    borderRadius: FtCssVariableFactory.extend("--ft-copy-block-border-radius", "", designSystemVariables.borderRadiusS),
+    borderStyle: FtCssVariableFactory.create("--ft-copy-block-border-style", "", "BORDER-STYLE", "solid"),
+    borderColor: FtCssVariableFactory.extend("--ft-copy-block-border-color", "", designSystemVariables.colorOutline),
+    borderWidth: FtCssVariableFactory.create("--ft-copy-block-border-width", "", "SIZE", "1px"),
+    backgroundColor: FtCssVariableFactory.extend("--ft-copy-block-background-color", "", designSystemVariables.colorSurface),
+    buttonHeight: FtCssVariableFactory.create("--ft-copy-block-button-height", "", "SIZE", "unset"),
+};
+// language=CSS
+export const styles = css `
+    :host {
+        display: block;
+    }
+
+    [part="container"] {
+        position: relative;
+        border-radius: ${FtCopyBlockCssVariables.borderRadius};
+        border-style: ${FtCopyBlockCssVariables.borderStyle};
+        border-color: ${FtCopyBlockCssVariables.borderColor};
+        border-width: ${FtCopyBlockCssVariables.borderWidth};
+        background-color: ${FtCopyBlockCssVariables.backgroundColor};
+    }
+
+    [part="button-container"] {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: ${FtCopyBlockCssVariables.buttonHeight}
+    }
+
+    [part="content"] {
+        overflow-x: auto;
+        margin: ${FtCopyBlockCssVariables.spacing};
+    }
+
+    [part="tooltip"] {
+        display: block;
+        height: ${FtCopyBlockCssVariables.buttonHeight}
+    }
+
+    [part="tooltip"]::part(container) {
+        height: ${FtCopyBlockCssVariables.buttonHeight}
+    }
+
+    [part="button"] {
+        height: ${FtCopyBlockCssVariables.buttonHeight}
+    }
+
+    [part="button"]::part(button) {
+        height: ${FtCopyBlockCssVariables.buttonHeight}
+    }
+
+`;

package/build/ft-copy-block.d.ts

@@ -0,0 +1,11 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtCopyBlockProperties } from "./ft-copy-block.properties";
+import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+export declare class FtCopyBlock extends FtLitElementWithI18n implements FtCopyBlockProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private tooltip?;
+    constructor();
+    protected render(): import("lit").TemplateResult<1>;
+    private copyContents;
+}

package/build/ft-copy-block.js

@@ -0,0 +1,58 @@
+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 } from "lit";
+import { query } from "lit/decorators.js";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { styles } from "./ft-copy-block.css";
+import { copyBlock, defaultCopyBlockMessages } from "./CopyBlockComponentMessages";
+import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+class FtCopyBlock extends FtLitElementWithI18n {
+    constructor() {
+        super();
+        this.addI18nContext(copyBlock, defaultCopyBlockMessages);
+    }
+    render() {
+        return html `
+            <div part="container">
+                ${navigator.clipboard ? html `
+                    <div part="button-container">
+                        <ft-tooltip part="tooltip" text=${copyBlock.messages.tooltipMessage()} position="bottom" exportpartsPrefix="tooltip">
+                            <ft-button icon="CLONE" part="button" exportpartsPrefix="button" @click=${this.copyContents}></ft-button>
+                        </ft-tooltip>
+                    </div>
+                ` : nothing}
+
+                <div part="content">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    }
+    async copyContents() {
+        try {
+            await navigator.clipboard.writeText(this.shadowRoot.host.innerText);
+            this.tooltip.manual = true;
+            this.tooltip.text = copyBlock.messages.copySuccessMessage();
+            await this.tooltip.show(1000);
+            this.tooltip.text = copyBlock.messages.tooltipMessage();
+            this.tooltip.manual = false;
+        }
+        catch {
+            console.log("Failed to copy to clipboard");
+        }
+    }
+}
+FtCopyBlock.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-tooltip": FtTooltip,
+};
+FtCopyBlock.styles = styles;
+__decorate([
+    query("[part='tooltip']")
+], FtCopyBlock.prototype, "tooltip", void 0);
+export { FtCopyBlock };