@figspec/components - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

cjs/es2016/FigspecViewer/DistanceGuide.d.ts

@@ -8,3 +8,3 @@ import type { SizedNode } from "./types";
 }
-export declare const Guides: ({ node, distanceTo, reverseScale, fontSize, }: GuidesProps) => (import("lit-element").SVGTemplateResult | null)[];
-export declare const styles: import("lit-element").CSSResult;
+export declare const Guides: ({ node, distanceTo, reverseScale, fontSize, }: GuidesProps) => (import("lit-html").TemplateResult<2> | null)[];
+export declare const styles: import("lit").CSSResult;

cjs/es2016/FigspecViewer/DistanceGuide.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = exports.Guides = void 0;
-const lit_element_1 = require("lit-element");
-const style_map_1 = require("lit-html/directives/style-map");
+const lit_1 = require("lit");
+const style_map_js_1 = require("lit/directives/style-map.js");
 const utils_1 = require("./utils");
@@ -13,3 +13,3 @@ const Line = ({ guide, reverseScale }) => {
     }
-    return lit_element_1.svg `
+    return lit_1.svg `
     <line
@@ -24,3 +24,3 @@ class="distance-line"
     ${guide.bisector &&
-        lit_element_1.svg `
+        lit_1.svg `
         <line
@@ -32,3 +32,3 @@ class="distance-line"
           y2=${guide.bisector[1].y}
-          style=${style_map_1.styleMap({
+          style=${style_map_js_1.styleMap({
             strokeDasharray: `${4 * reverseScale}`,
@@ -72,3 +72,3 @@ })}
     const transformOrigin = xLength > yLength ? `${cx} ${y}` : `${x} ${cy}`;
-    return lit_element_1.svg `
+    return lit_1.svg `
     <g class="distance-tooltip">
@@ -114,3 +114,3 @@ <rect
 };
-exports.styles = lit_element_1.css `
+exports.styles = lit_1.css `
   .distance-line {
@@ -117,0 +117,0 @@ shape-rendering: geometricPrecision;

cjs/es2016/FigspecViewer/ErrorMessage.d.ts

@@ -1,2 +0,2 @@
-import { TemplateResult } from "lit-element";
+import { TemplateResult } from "lit";
 export interface ErrorMessageProps {
@@ -6,3 +6,3 @@ title: string;
 }
-export declare const ErrorMessage: ({ title, children }: ErrorMessageProps) => TemplateResult;
-export declare const styles: import("lit-element").CSSResult;
+export declare const ErrorMessage: ({ title, children }: ErrorMessageProps) => TemplateResult<1>;
+export declare const styles: import("lit").CSSResult;

cjs/es2016/FigspecViewer/ErrorMessage.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = exports.ErrorMessage = void 0;
-const lit_element_1 = require("lit-element");
-exports.ErrorMessage = ({ title, children }) => lit_element_1.html `
+const lit_1 = require("lit");
+exports.ErrorMessage = ({ title, children }) => lit_1.html `
   <div class="error-background">
@@ -15,3 +15,3 @@ <div class="error-container">
 `;
-exports.styles = lit_element_1.css `
+exports.styles = lit_1.css `
   .error-background {
@@ -18,0 +18,0 @@ position: absolute;

cjs/es2016/FigspecViewer/FigspecFileViewer.d.ts

 import type * as Figma from "figma-js";
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 declare const FigspecFileViewer_base: typeof LitElement & import("./utils").Constructor<import("./ViewerMixin").IViewer & import("./NodeSelectableMixin").INodeSelectable & import("./PositionedMixin").Positioned>;
@@ -67,5 +67,5 @@ /**
     /** @private */
-    get error(): string | Error | import("lit-element").TemplateResult | undefined;
-    static get styles(): import("lit-element").CSSResultArray;
-    render(): import("lit-element").TemplateResult;
+    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
+    static get styles(): import("lit").CSSResultArray;
+    render(): import("lit-html").TemplateResult<1>;
     getMetadata(): {
@@ -72,0 +72,0 @@ fileName: string;

cjs/es2016/FigspecViewer/FigspecFileViewer.js

@@ -17,3 +17,4 @@ "use strict";
 exports.FigspecFileViewer = void 0;
-const lit_element_1 = require("lit-element");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
 const ErrorMessage = require("./ErrorMessage");
@@ -64,3 +65,3 @@ const ViewerMixin_1 = require("./ViewerMixin");
  */
-class FigspecFileViewer extends ViewerMixin_1.ViewerMixin(lit_element_1.LitElement) {
+class FigspecFileViewer extends ViewerMixin_1.ViewerMixin(lit_1.LitElement) {
     constructor() {
@@ -117,3 +118,3 @@ super(...arguments);
                 title: "Parameter error",
-                children: lit_element_1.html `<span>
+                children: lit_1.html `<span>
           Both <code>document-node</code> and <code>rendered-images</code> are
@@ -130,3 +131,3 @@ required.
         return utils_1.extendStyles(super.styles, [
-            lit_element_1.css `
+            lit_1.css `
         :host {
@@ -181,6 +182,6 @@ --figspec-control-bg-default: #fcfcfc;
         var _a;
-        return lit_element_1.html `
+        return lit_1.html `
       <div class="controls">
         <select @change=${__classPrivateFieldGet(this, _handlePageChange)}>
-          ${(_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.map((c) => lit_element_1.html `<option value=${c.id}>${c.name}</option>`)}
+          ${(_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.map((c) => lit_1.html `<option value=${c.id}>${c.name}</option>`)}
         </select>
@@ -225,3 +226,3 @@ </div>
 __decorate([
-    lit_element_1.property({
+    decorators_js_1.property({
         type: Object,
@@ -232,3 +233,3 @@ attribute: "document-node",
 __decorate([
-    lit_element_1.property({
+    decorators_js_1.property({
         type: Object,
@@ -235,0 +236,0 @@ attribute: "rendered-images",

cjs/es2016/FigspecViewer/FigspecFrameViewer.d.ts

 import type * as Figma from "figma-js";
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import { SizedNode } from "./utils";
@@ -69,3 +69,3 @@ declare const FigspecFrameViewer_base: typeof LitElement & import("./utils").Constructor<import("./ViewerMixin").IViewer & import("./NodeSelectableMixin").INodeSelectable & import("./PositionedMixin").Positioned>;
     /** @private */
-    get error(): string | Error | import("lit-element").TemplateResult | undefined;
+    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
     getMetadata(): {
@@ -72,0 +72,0 @@ fileName: string;

cjs/es2016/FigspecViewer/FigspecFrameViewer.js

@@ -10,3 +10,4 @@ "use strict";
 exports.FigspecFrameViewer = void 0;
-const lit_element_1 = require("lit-element");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
 const ErrorMessage = require("./ErrorMessage");
@@ -56,3 +57,3 @@ const ViewerMixin_1 = require("./ViewerMixin");
  */
-class FigspecFrameViewer extends ViewerMixin_1.ViewerMixin(lit_element_1.LitElement) {
+class FigspecFrameViewer extends ViewerMixin_1.ViewerMixin(lit_1.LitElement) {
     constructor() {
@@ -103,3 +104,3 @@ super(...arguments);
                 title: "Parameter error",
-                children: lit_element_1.html `<span>
+                children: lit_1.html `<span>
           Both <code>nodes</code> and <code>rendered-image</code> are required.
@@ -112,3 +113,3 @@ </span>`,
                 title: "Parameter Error",
-                children: lit_element_1.html `
+                children: lit_1.html `
           <span> Document node is empty or does not have size. </span>
@@ -151,3 +152,3 @@ `,
 __decorate([
-    lit_element_1.property({
+    decorators_js_1.property({
         type: Object,
@@ -157,3 +158,3 @@ })
 __decorate([
-    lit_element_1.property({
+    decorators_js_1.property({
         type: String,
@@ -160,0 +161,0 @@ attribute: "rendered-image",

cjs/es2016/FigspecViewer/Footer/Footer.d.ts

@@ -1,2 +0,2 @@
-export declare const styles: import("lit-element").CSSResult;
+export declare const styles: import("lit").CSSResult;
 export declare const Footer: (metadata?: {
@@ -6,2 +6,2 @@ link: string;
     fileName: string;
-} | undefined) => import("lit-element").TemplateResult | null;
+} | undefined) => import("lit-html").TemplateResult<1> | null;

cjs/es2016/FigspecViewer/Footer/Footer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = exports.styles = void 0;
-const lit_element_1 = require("lit-element");
+const lit_1 = require("lit");
 const Icons_1 = require("../Icons");
 const utils_1 = require("./utils");
-exports.styles = lit_element_1.css `
+exports.styles = lit_1.css `
   .figma-footer {
@@ -53,3 +53,3 @@ flex: 0;
     const { link, timestamp, fileName } = metadata;
-    return lit_element_1.html `<a
+    return lit_1.html `<a
     class="figma-footer"
@@ -56,0 +56,0 @@ target="_blank"

cjs/es2016/FigspecViewer/Icons.d.ts

 export declare const CloseIcon: ({ onClick }: {
     onClick?: (() => void) | undefined;
-}) => import("lit-element").SVGTemplateResult;
+}) => import("lit-html").TemplateResult<2>;
 export declare const CopyIcon: ({ onClick }: {
     onClick?: (() => void) | undefined;
-}) => import("lit-element").SVGTemplateResult;
-export declare const HorizontalPaddingIcon: () => import("lit-element").SVGTemplateResult;
-export declare const VerticalPaddingIcon: () => import("lit-element").SVGTemplateResult;
-export declare const FigmaIcon: () => import("lit-element").SVGTemplateResult;
+}) => import("lit-html").TemplateResult<2>;
+export declare const HorizontalPaddingIcon: () => import("lit-html").TemplateResult<2>;
+export declare const VerticalPaddingIcon: () => import("lit-html").TemplateResult<2>;
+export declare const FigmaIcon: () => import("lit-html").TemplateResult<2>;

cjs/es2016/FigspecViewer/Icons.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigmaIcon = exports.VerticalPaddingIcon = exports.HorizontalPaddingIcon = exports.CopyIcon = exports.CloseIcon = void 0;
-const lit_element_1 = require("lit-element");
-exports.CloseIcon = ({ onClick = () => { } }) => lit_element_1.svg `
+const lit_1 = require("lit");
+exports.CloseIcon = ({ onClick = () => { } }) => lit_1.svg `
   <svg @click=${onClick} title="close icon" width="14" height="14" viewBox="0 0 20 20" fill="none">
@@ -10,3 +10,3 @@ <path d="M1 19L19 1M19 19L1 1" stroke="#B3B3B3" stroke-width="2"/>
 `;
-exports.CopyIcon = ({ onClick = () => { } }) => lit_element_1.svg `
+exports.CopyIcon = ({ onClick = () => { } }) => lit_1.svg `
   <svg @click=${onClick} title="copy icon" width="14" height="14" viewBox="0 0 30 30" fill="none">
@@ -16,3 +16,3 @@ <path d="M21 25.5C21 24.9477 20.5523 24.5 20 24.5C19.4477 24.5 19 24.9477 19 25.5H21ZM13 2H25V0H13V2ZM28 5V21H30V5H28ZM25 24H13V26H25V24ZM10 21V5H8V21H10ZM13 24C11.3431 24 10 22.6569 10 21H8C8 23.7614 10.2386 26 13 26V24ZM28 21C28 22.6569 26.6569 24 25 24V26C27.7614 26 30 23.7614 30 21H28ZM25 2C26.6569 2 28 3.34315 28 5H30C30 2.23858 27.7614 0 25 0V2ZM13 0C10.2386 0 8 2.23858 8 5H10C10 3.34315 11.3431 2 13 2V0ZM16.5 28H5V30H16.5V28ZM2 25V10H0V25H2ZM5 28C3.34315 28 2 26.6569 2 25H0C0 27.7614 2.23858 30 5 30V28ZM5 7H8V5H5V7ZM2 10C2 8.34315 3.34315 7 5 7V5C2.23858 5 0 7.23858 0 10H2ZM16.5 30C18.9853 30 21 27.9853 21 25.5H19C19 26.8807 17.8807 28 16.5 28V30Z" fill="#B3B3B3"/>
 `;
-exports.HorizontalPaddingIcon = () => lit_element_1.svg `
+exports.HorizontalPaddingIcon = () => lit_1.svg `
   <svg title="horizontal padding" width="14" height="14" viewBox="0 0 29 28" fill="none">
@@ -24,3 +24,3 @@ <rect x="7" y="8" width="14" height="14" stroke="#B3B3B3" stroke-width="2"/>
 `;
-exports.VerticalPaddingIcon = () => lit_element_1.svg `
+exports.VerticalPaddingIcon = () => lit_1.svg `
   <svg title="vertical padding" width="14" height="14" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -32,3 +32,3 @@ <rect x="8" y="21" width="14" height="14" transform="rotate(-90 8 21)" stroke="#B3B3B3" stroke-width="2"/>
 `;
-exports.FigmaIcon = () => lit_element_1.svg `
+exports.FigmaIcon = () => lit_1.svg `
   <svg title="figma logo" width="11" height="16" viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
@@ -35,0 +35,0 @@ <path

cjs/es2016/FigspecViewer/InspectorView/InspectorView.d.ts

@@ -6,4 +6,4 @@ import { FigmaNode, NodeStyles } from "./utils";
 };
-export declare const View: ({ node, onClose }: InspectorViewProps) => import("lit-element").TemplateResult | null;
-export declare const StylesSection: (nodeStyles: NodeStyles) => import("lit-element").TemplateResult;
-export declare const styles: import("lit-element").CSSResult;
+export declare const View: ({ node, onClose }: InspectorViewProps) => import("lit-html").TemplateResult<1> | null;
+export declare const StylesSection: (nodeStyles: NodeStyles) => import("lit-html").TemplateResult<1>;
+export declare const styles: import("lit").CSSResult;

cjs/es2016/FigspecViewer/InspectorView/InspectorView.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = exports.StylesSection = exports.View = void 0;
-const lit_element_1 = require("lit-element");
-const copy = require("copy-to-clipboard");
+const lit_1 = require("lit");
 const Icons_1 = require("../Icons");
 const utils_1 = require("./utils");
+const copy = (text) => __awaiter(void 0, void 0, void 0, function* () {
+    yield navigator.clipboard.writeText(text);
+});
 exports.View = ({ node, onClose }) => {
@@ -17,3 +28,3 @@ if (!node) {
     const stopPropagation = (ev) => ev.stopPropagation();
-    return lit_element_1.html `
+    return lit_1.html `
     <div
@@ -42,3 +53,3 @@ class="inspector-view"
           ${nodeStyles.fontPostScriptName
-        ? lit_element_1.html `<p class="inspector-property">
+        ? lit_1.html `<p class="inspector-property">
                 <span>Font:</span>
@@ -51,10 +62,10 @@ ${nodeStyles.fontPostScriptName}
       ${nodeStyles.hasPadding
-        ? lit_element_1.html `<div class="inspector-section">
+        ? lit_1.html `<div class="inspector-section">
             <h4>Layout</h4>
             ${nodeStyles.horizontalPadding &&
-            lit_element_1.html `<p class="inspector-property">
+            lit_1.html `<p class="inspector-property">
               ${Icons_1.HorizontalPaddingIcon()} ${nodeStyles.horizontalPadding}
             </p>`}
             ${nodeStyles.verticalPadding &&
-            lit_element_1.html `<p class="inspector-property">
+            lit_1.html `<p class="inspector-property">
               ${Icons_1.VerticalPaddingIcon()} ${nodeStyles.verticalPadding}
@@ -65,3 +76,3 @@ </p>`}
       ${node.characters
-        ? lit_element_1.html `<div class="inspector-section">
+        ? lit_1.html `<div class="inspector-section">
             <div class="title-section">
@@ -83,3 +94,3 @@ <h4>Content</h4>
     const styles = nodeStyles.getStyles();
-    return lit_element_1.html `<div class="inspector-section">
+    return lit_1.html `<div class="inspector-section">
     <div class="title-section style-section">
@@ -103,3 +114,3 @@ <h4>CSS</h4>
         case "color":
-            coloredSquare = lit_element_1.html `<span
+            coloredSquare = lit_1.html `<span
         class="color-preview"
@@ -110,3 +121,3 @@ style="background-color: ${color}"
         case "background-image":
-            coloredSquare = lit_element_1.html `<span
+            coloredSquare = lit_1.html `<span
         class="color-preview"
@@ -117,7 +128,7 @@ style="background-image: ${value}"
     }
-    return lit_element_1.html `<div class="css-property" @click=${() => copy(utils_1.getStyleRule(cssProperty))}>
+    return lit_1.html `<div class="css-property" @click=${() => copy(utils_1.getStyleRule(cssProperty))}>
     <span>${property}:</span>${coloredSquare}<span class="css-value">${value}</span>;</span>
   </div>`;
 };
-exports.styles = lit_element_1.css `
+exports.styles = lit_1.css `
   .inspector-view {
@@ -124,0 +135,0 @@ height: 100%;

cjs/es2016/FigspecViewer/Node.d.ts

@@ -10,3 +10,3 @@ import * as Figma from "figma-js";
 }
-export declare const Outline: ({ node, selected, computedThickness, onClick, }: OutlineProps) => import("lit-element").SVGTemplateResult;
+export declare const Outline: ({ node, selected, computedThickness, onClick, }: OutlineProps) => import("lit-html").TemplateResult<2>;
 export interface TooltipProps {
@@ -18,3 +18,3 @@ nodeSize: Figma.Rect;
 }
-export declare const Tooltip: ({ nodeSize: { x, y, width, height }, offsetX, offsetY, reverseScale, }: TooltipProps) => import("lit-element").TemplateResult;
-export declare const styles: import("lit-element").CSSResult;
+export declare const Tooltip: ({ nodeSize: { x, y, width, height }, offsetX, offsetY, reverseScale, }: TooltipProps) => import("lit-html").TemplateResult<1>;
+export declare const styles: import("lit").CSSResult;

cjs/es2016/FigspecViewer/Node.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = exports.Tooltip = exports.Outline = void 0;
-const lit_element_1 = require("lit-element");
-const style_map_1 = require("lit-html/directives/style-map");
+const lit_1 = require("lit");
+const style_map_js_1 = require("lit/directives/style-map.js");
 const utils_1 = require("./utils");
@@ -52,3 +52,3 @@ exports.Outline = ({ node, selected = false, computedThickness, onClick, }) => {
     ].join(" ");
-    return lit_element_1.svg `
+    return lit_1.svg `
     <path
@@ -71,4 +71,4 @@ class="guide"
     };
-    return lit_element_1.html `
-    <div class="tooltip" style="${style_map_1.styleMap(tooltipStyle)}">
+    return lit_1.html `
+    <div class="tooltip" style="${style_map_js_1.styleMap(tooltipStyle)}">
       ${utils_1.round(width)} x ${utils_1.round(height)}
@@ -78,3 +78,3 @@ </div>
 };
-exports.styles = lit_element_1.css `
+exports.styles = lit_1.css `
   .guide {
@@ -81,0 +81,0 @@ /*

cjs/es2016/FigspecViewer/NodeSelectableMixin.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import type { Constructor, SizedNode } from "./utils";
@@ -3,0 +3,0 @@ export interface INodeSelectable {

cjs/es2016/FigspecViewer/NodeSelectableMixin.js

@@ -10,3 +10,3 @@ "use strict";
 exports.NodeSelectableMixin = void 0;
-const lit_element_1 = require("lit-element");
+const decorators_js_1 = require("lit/decorators.js");
 exports.NodeSelectableMixin = (superClass) => {
@@ -30,3 +30,3 @@ class NodeSelectable extends superClass {
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             attribute: false,
@@ -33,0 +33,0 @@ })

cjs/es2016/FigspecViewer/PositionedMixin.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import { TouchGestureMixinProps } from "./TouchGestureMixin";
@@ -3,0 +3,0 @@ import type { Constructor } from "./utils";

cjs/es2016/FigspecViewer/PositionedMixin.js

@@ -23,3 +23,3 @@ "use strict";
 exports.PositionedMixin = void 0;
-const lit_element_1 = require("lit-element");
+const decorators_js_1 = require("lit/decorators.js");
 const TouchGestureMixin_1 = require("./TouchGestureMixin");
@@ -175,3 +175,3 @@ exports.PositionedMixin = (superClass) => {
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             attribute: false,
@@ -181,3 +181,3 @@ })
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             attribute: false,
@@ -187,3 +187,3 @@ })
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             attribute: false,
@@ -193,3 +193,3 @@ })
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             type: Number,
@@ -200,3 +200,3 @@ attribute: "zoom-speed",
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             type: Number,
@@ -203,0 +203,0 @@ attribute: "pan-speed",

cjs/es2016/FigspecViewer/TouchGestureMixin.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import type { Constructor, Point2D } from "./utils";
@@ -3,0 +3,0 @@ export interface TouchGestureMixinProps {

cjs/es2016/FigspecViewer/utils.d.ts

 import * as Figma from "figma-js";
-import { CSSResultArray, LitElement } from "lit-element";
+import { CSSResultArray, LitElement } from "lit";
 export declare type SizedNode = Extract<Figma.Node, {
@@ -4,0 +4,0 @@ absoluteBoundingBox: any;

cjs/es2016/FigspecViewer/ViewerMixin.d.ts

 import type * as Figma from "figma-js";
-import { LitElement, TemplateResult } from "lit-element";
+import { LitElement, TemplateResult } from "lit";
 import { Constructor } from "./utils";
@@ -4,0 +4,0 @@ import { INodeSelectable } from "./NodeSelectableMixin";

cjs/es2016/FigspecViewer/ViewerMixin.js

@@ -23,4 +23,5 @@ "use strict";
 exports.ViewerMixin = void 0;
-const lit_element_1 = require("lit-element");
-const style_map_1 = require("lit-html/directives/style-map");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const style_map_js_1 = require("lit/directives/style-map.js");
 const utils_1 = require("./utils");
@@ -59,3 +60,3 @@ const NodeSelectableMixin_1 = require("./NodeSelectableMixin");
             return utils_1.extendStyles(styles, [
-                lit_element_1.css `
+                lit_1.css `
           :host {
@@ -187,3 +188,3 @@ --default-error-bg: #fff;
             const computedGuideTooltipFontSize = parseFloat(getComputedStyle(this).getPropertyValue("--guide-tooltip-font-size"));
-            return lit_element_1.html `
+            return lit_1.html `
         <div class="spec-canvas-wrapper" @click=${this.deselectNode}>
@@ -208,5 +209,5 @@ <div
                 const margin = __classPrivateFieldGet(this, _effectMargins)[node.id];
-                return lit_element_1.html `
+                return lit_1.html `
                 <img class="rendered-image" src="${uri}"
-                style=${style_map_1.styleMap({
+                style=${style_map_js_1.styleMap({
                     top: `${node.absoluteBoundingBox.y - canvasSize.y}px`,
@@ -235,3 +236,3 @@ left: `${node.absoluteBoundingBox.x - canvasSize.x}px`,
                 })}
-            ${lit_element_1.svg `
+            ${lit_1.svg `
             <svg
@@ -242,3 +243,3 @@ class="guides"
               height="5"
-              style=${style_map_1.styleMap({
+              style=${style_map_js_1.styleMap({
                 left: `${-canvasSize.x}px`,
@@ -261,3 +262,3 @@ top: `${-canvasSize.y}px`,
                 }
-                return lit_element_1.svg `
+                return lit_1.svg `
                   <g>
@@ -343,3 +344,3 @@ ${Node.Outline({
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             type: Number,
@@ -350,3 +351,3 @@ attribute: "zoom-margin",
     __decorate([
-        lit_element_1.property({
+        decorators_js_1.property({
             type: String,
@@ -353,0 +354,0 @@ attribute: "link",

esm/es2015/FigspecViewer/DistanceGuide.d.ts

@@ -8,3 +8,3 @@ import type { SizedNode } from "./types";
 }
-export declare const Guides: ({ node, distanceTo, reverseScale, fontSize, }: GuidesProps) => (import("lit-element").SVGTemplateResult | null)[];
-export declare const styles: import("lit-element").CSSResult;
+export declare const Guides: ({ node, distanceTo, reverseScale, fontSize, }: GuidesProps) => (import("lit-html").TemplateResult<2> | null)[];
+export declare const styles: import("lit").CSSResult;

esm/es2015/FigspecViewer/DistanceGuide.js

@@ -1,3 +0,3 @@
-import { css, svg } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, svg } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
 import { getDistanceGuides, round } from "./utils";
@@ -4,0 +4,0 @@ const Line = ({ guide, reverseScale }) => {

esm/es2015/FigspecViewer/ErrorMessage.d.ts

@@ -1,2 +0,2 @@
-import { TemplateResult } from "lit-element";
+import { TemplateResult } from "lit";
 export interface ErrorMessageProps {
@@ -6,3 +6,3 @@ title: string;
 }
-export declare const ErrorMessage: ({ title, children }: ErrorMessageProps) => TemplateResult;
-export declare const styles: import("lit-element").CSSResult;
+export declare const ErrorMessage: ({ title, children }: ErrorMessageProps) => TemplateResult<1>;
+export declare const styles: import("lit").CSSResult;

esm/es2015/FigspecViewer/ErrorMessage.js

@@ -1,2 +0,2 @@
-import { css, html } from "lit-element";
+import { css, html } from "lit";
 export const ErrorMessage = ({ title, children }) => html `
@@ -3,0 +3,0 @@ <div class="error-background">

esm/es2015/FigspecViewer/FigspecFileViewer.d.ts

 import type * as Figma from "figma-js";
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 declare const FigspecFileViewer_base: typeof LitElement & import("./utils").Constructor<import("./ViewerMixin").IViewer & import("./NodeSelectableMixin").INodeSelectable & import("./PositionedMixin").Positioned>;
@@ -67,5 +67,5 @@ /**
     /** @private */
-    get error(): string | Error | import("lit-element").TemplateResult | undefined;
-    static get styles(): import("lit-element").CSSResultArray;
-    render(): import("lit-element").TemplateResult;
+    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
+    static get styles(): import("lit").CSSResultArray;
+    render(): import("lit-html").TemplateResult<1>;
     getMetadata(): {
@@ -72,0 +72,0 @@ fileName: string;

esm/es2015/FigspecViewer/FigspecFileViewer.js

@@ -14,3 +14,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 var _selectFirstPage, _handlePageChange;
-import { LitElement, css, html, property } from "lit-element";
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
 import * as ErrorMessage from "./ErrorMessage";
@@ -17,0 +18,0 @@ import { ViewerMixin } from "./ViewerMixin";

esm/es2015/FigspecViewer/FigspecFrameViewer.d.ts

 import type * as Figma from "figma-js";
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import { SizedNode } from "./utils";
@@ -69,3 +69,3 @@ declare const FigspecFrameViewer_base: typeof LitElement & import("./utils").Constructor<import("./ViewerMixin").IViewer & import("./NodeSelectableMixin").INodeSelectable & import("./PositionedMixin").Positioned>;
     /** @private */
-    get error(): string | Error | import("lit-element").TemplateResult | undefined;
+    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
     getMetadata(): {
@@ -72,0 +72,0 @@ fileName: string;

esm/es2015/FigspecViewer/FigspecFrameViewer.js

@@ -7,3 +7,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { LitElement, html, property } from "lit-element";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
 import * as ErrorMessage from "./ErrorMessage";
@@ -10,0 +11,0 @@ import { ViewerMixin } from "./ViewerMixin";

esm/es2015/FigspecViewer/Footer/Footer.d.ts

@@ -1,2 +0,2 @@
-export declare const styles: import("lit-element").CSSResult;
+export declare const styles: import("lit").CSSResult;
 export declare const Footer: (metadata?: {
@@ -6,2 +6,2 @@ link: string;
     fileName: string;
-} | undefined) => import("lit-element").TemplateResult | null;
+} | undefined) => import("lit-html").TemplateResult<1> | null;

esm/es2015/FigspecViewer/Footer/Footer.js

@@ -1,2 +0,2 @@
-import { css, html } from "lit-element";
+import { css, html } from "lit";
 import { FigmaIcon } from "../Icons";
@@ -3,0 +3,0 @@ import { fromNow } from "./utils";

esm/es2015/FigspecViewer/Icons.d.ts

 export declare const CloseIcon: ({ onClick }: {
     onClick?: (() => void) | undefined;
-}) => import("lit-element").SVGTemplateResult;
+}) => import("lit-html").TemplateResult<2>;
 export declare const CopyIcon: ({ onClick }: {
     onClick?: (() => void) | undefined;
-}) => import("lit-element").SVGTemplateResult;
-export declare const HorizontalPaddingIcon: () => import("lit-element").SVGTemplateResult;
-export declare const VerticalPaddingIcon: () => import("lit-element").SVGTemplateResult;
-export declare const FigmaIcon: () => import("lit-element").SVGTemplateResult;
+}) => import("lit-html").TemplateResult<2>;
+export declare const HorizontalPaddingIcon: () => import("lit-html").TemplateResult<2>;
+export declare const VerticalPaddingIcon: () => import("lit-html").TemplateResult<2>;
+export declare const FigmaIcon: () => import("lit-html").TemplateResult<2>;

esm/es2015/FigspecViewer/Icons.js

@@ -1,2 +0,2 @@
-import { svg } from "lit-element";
+import { svg } from "lit";
 export const CloseIcon = ({ onClick = () => { } }) => svg `
@@ -3,0 +3,0 @@ <svg @click=${onClick} title="close icon" width="14" height="14" viewBox="0 0 20 20" fill="none">

esm/es2015/FigspecViewer/InspectorView/InspectorView.d.ts

@@ -6,4 +6,4 @@ import { FigmaNode, NodeStyles } from "./utils";
 };
-export declare const View: ({ node, onClose }: InspectorViewProps) => import("lit-element").TemplateResult | null;
-export declare const StylesSection: (nodeStyles: NodeStyles) => import("lit-element").TemplateResult;
-export declare const styles: import("lit-element").CSSResult;
+export declare const View: ({ node, onClose }: InspectorViewProps) => import("lit-html").TemplateResult<1> | null;
+export declare const StylesSection: (nodeStyles: NodeStyles) => import("lit-html").TemplateResult<1>;
+export declare const styles: import("lit").CSSResult;

esm/es2015/FigspecViewer/InspectorView/InspectorView.js

@@ -1,5 +0,16 @@
-import { css, html } from "lit-element";
-import * as copy from "copy-to-clipboard";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { css, html } from "lit";
 import { HorizontalPaddingIcon, VerticalPaddingIcon, CloseIcon, CopyIcon, } from "../Icons";
 import { getStyleRule, NodeStyles } from "./utils";
+const copy = (text) => __awaiter(void 0, void 0, void 0, function* () {
+    yield navigator.clipboard.writeText(text);
+});
 export const View = ({ node, onClose }) => {
@@ -6,0 +17,0 @@ if (!node) {

esm/es2015/FigspecViewer/Node.d.ts

@@ -10,3 +10,3 @@ import * as Figma from "figma-js";
 }
-export declare const Outline: ({ node, selected, computedThickness, onClick, }: OutlineProps) => import("lit-element").SVGTemplateResult;
+export declare const Outline: ({ node, selected, computedThickness, onClick, }: OutlineProps) => import("lit-html").TemplateResult<2>;
 export interface TooltipProps {
@@ -18,3 +18,3 @@ nodeSize: Figma.Rect;
 }
-export declare const Tooltip: ({ nodeSize: { x, y, width, height }, offsetX, offsetY, reverseScale, }: TooltipProps) => import("lit-element").TemplateResult;
-export declare const styles: import("lit-element").CSSResult;
+export declare const Tooltip: ({ nodeSize: { x, y, width, height }, offsetX, offsetY, reverseScale, }: TooltipProps) => import("lit-html").TemplateResult<1>;
+export declare const styles: import("lit").CSSResult;

esm/es2015/FigspecViewer/Node.js

@@ -1,3 +0,3 @@
-import { css, html, svg } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, html, svg } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
 import { round } from "./utils";
@@ -4,0 +4,0 @@ export const Outline = ({ node, selected = false, computedThickness, onClick, }) => {

esm/es2015/FigspecViewer/NodeSelectableMixin.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import type { Constructor, SizedNode } from "./utils";
@@ -3,0 +3,0 @@ export interface INodeSelectable {

esm/es2015/FigspecViewer/NodeSelectableMixin.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { property } from "lit-element";
+import { property } from "lit/decorators.js";
 export const NodeSelectableMixin = (superClass) => {
@@ -10,0 +10,0 @@ class NodeSelectable extends superClass {

esm/es2015/FigspecViewer/PositionedMixin.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import { TouchGestureMixinProps } from "./TouchGestureMixin";
@@ -3,0 +3,0 @@ import type { Constructor } from "./utils";

esm/es2015/FigspecViewer/PositionedMixin.js

@@ -20,3 +20,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { property } from "lit-element";
+import { property } from "lit/decorators.js";
 import { TouchGestureMixin } from "./TouchGestureMixin";
@@ -23,0 +23,0 @@ export const PositionedMixin = (superClass) => {

esm/es2015/FigspecViewer/TouchGestureMixin.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import type { Constructor, Point2D } from "./utils";
@@ -3,0 +3,0 @@ export interface TouchGestureMixinProps {

esm/es2015/FigspecViewer/utils.d.ts

 import * as Figma from "figma-js";
-import { CSSResultArray, LitElement } from "lit-element";
+import { CSSResultArray, LitElement } from "lit";
 export declare type SizedNode = Extract<Figma.Node, {
@@ -4,0 +4,0 @@ absoluteBoundingBox: any;

esm/es2015/FigspecViewer/ViewerMixin.d.ts

 import type * as Figma from "figma-js";
-import { LitElement, TemplateResult } from "lit-element";
+import { LitElement, TemplateResult } from "lit";
 import { Constructor } from "./utils";
@@ -4,0 +4,0 @@ import { INodeSelectable } from "./NodeSelectableMixin";

esm/es2015/FigspecViewer/ViewerMixin.js

@@ -20,4 +20,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { css, html, svg, property, } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, html, svg } from "lit";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { extendStyles } from "./utils";
@@ -24,0 +25,0 @@ import { NodeSelectableMixin } from "./NodeSelectableMixin";

package.json

@@ -8,3 +8,3 @@ {
   ],
-  "version": "1.0.0",
+  "version": "1.0.1",
   "contributors": [
@@ -30,12 +30,10 @@ {
   "dependencies": {
-    "copy-to-clipboard": "^3.0.0",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.1.1"
+    "lit": "^2.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/web-components": "^6.2.9",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/web-components": "^6.4.0",
     "@types/react": "^16.9.52",
@@ -45,3 +43,2 @@ "babel-loader": "^8.1.0",
     "figma-js": "^1.13.0",
-    "lit-html": "^1.1.1",
     "react-is": "^16.13.1",
@@ -48,0 +45,0 @@ "ts-loader": "^8.0.5",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

291100

increased by0.34%

Dependency count

1

decreased by-66.67%

Dev dependency count

14

decreased by-6.67%

Lines of code

7834

increased by0.36%

Dependency changes

• + Addedlit@^2.1.3

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removedcopy-to-clipboard@^3.0.0

• - Removedlit-element@^2.4.0

• - Removedlit-html@^1.1.1

• - Removedcopy-to-clipboard@3.3.3(transitive)

• - Removedlit-element@2.5.1(transitive)

• - Removedlit-html@1.4.1(transitive)

• - Removedtoggle-selection@1.0.6(transitive)