@alegendstale/holly-components 1.0.2 → 1.1.0

package/dist/components/responsive-svg/responsive-svg.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, nothing, PropertyValues } from 'lit';
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
 type ViewBoxType = {
     x: number;
     y: number;
@@ -11,12 +11,20 @@ export declare class ResponsiveSvg extends LitElement {
     height: number;
     width: number;
     /** Must use a property expression (.) to set */
-    svg: SVGElement | string;
+    svg: SVGElement | TemplateResult<2> | string;
     private _svg;
     private _viewBox;
     protected svgClasses(): {};
     protected willUpdate(_changedProperties: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult<1> | typeof nothing | undefined;
+    /**
+     * Builds an SVG from an Element or TemplateResult<2> input
+     * @param svg
+     * @param width
+     * @param height
+     * @returns
+     */
+    private buildSVG;
     /**
      * Applies a part name to all paths in the given element
      */

package/dist/components/responsive-svg/responsive-svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-svg.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAOrE,KAAK,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACd,CAAA;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA6CX;IAGF,OAAO,EAAE,OAAO,CAAS;IAGzB,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAK;IAElB,gDAAgD;IAEhD,GAAG,EAAE,UAAU,GAAG,MAAM,CAAM;IAG9B,OAAO,CAAC,IAAI,CAA2B;IAGvC,OAAO,CAAC,QAAQ,CAAoD;IAGpE,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAa9D,MAAM;IAiCN;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;;OAGG;IACI,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI;CAM1D;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"responsive-svg.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ1F,KAAK,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACd,CAAA;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA6CX;IAGF,OAAO,EAAE,OAAO,CAAS;IAGzB,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAK;IAElB,gDAAgD;IAEhD,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAM;IAGlD,OAAO,CAAC,IAAI,CAAyC;IAGrD,OAAO,CAAC,QAAQ,CAAoD;IAGpE,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAa9D,MAAM;IAiBN;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAsBhB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;;OAGG;IACI,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI;CAM1D;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/dist/components/responsive-svg/responsive-svg.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, svg, css, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { condCustomElement } from '../../decorators/condCustomElement.js';
 import { parseSVG } from '../../utils/basicUtils.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { isTemplateResult } from 'lit/directive-helpers.js';
 let ResponsiveSvg = class ResponsiveSvg extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,7 +19,7 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         this.width = 0;
         /** Must use a property expression (.) to set */
         this.svg = '';
-        this._svg = '';
+        this._svg = svg ``;
         this._viewBox = { x: 0, y: 0, width: 0, height: 0 };
     }
     // For classes inheriting from responsive-svg (e.g. draw-svg)
@@ -28,9 +29,9 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
     willUpdate(_changedProperties) {
         super.willUpdate(_changedProperties);
         if (_changedProperties.has('svg')) {
-            const svgSource = this.svg instanceof SVGElement ? this.svg : parseSVG(this.svg);
-            if (svgSource) {
-                this._svg = svgSource;
+            const svgSource = this.svg instanceof SVGElement ? this.svg : isTemplateResult(this.svg) ? this.svg : parseSVG(this.svg);
+            this._svg = svgSource || svg ``;
+            if (svgSource instanceof Element) {
                 this._viewBox = this.getViewBoxSize(svgSource) || { x: 0, y: 0, width: 0, height: 0 };
             }
         }
@@ -38,28 +39,43 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
     render() {
         const width = this.width !== 0 ? this.width : this._viewBox.width;
         const height = this.height !== 0 ? this.height : this._viewBox.height;
-        const styles = {
-            '--svg-width': `${width}em`,
-            '--svg-height': `${height}em`,
-        };
         if (this._svg instanceof Element) {
             const clonedSVG = this._svg.cloneNode(true);
             this.applyPartToPaths(clonedSVG, 'path');
             const svgContent = Array.from(clonedSVG.children);
+            return this.buildSVG(svgContent, width, height);
+        }
+        else if (isTemplateResult(this._svg))
+            return this.buildSVG(this._svg, width, height);
+        else
+            return nothing;
+    }
+    /**
+     * Builds an SVG from an Element or TemplateResult<2> input
+     * @param svg
+     * @param width
+     * @param height
+     * @returns
+     */
+    buildSVG(svg, width, height) {
+        const styles = {
+            '--svg-width': `${width}em`,
+            '--svg-height': `${height}em`,
+        };
+        if (svg) {
             return html `
 				<svg
 					part="svg"
 					class=${classMap(this.svgClasses())}
 					style=${styleMap(styles)}
-					viewBox="0 0 ${width} ${height}" 
-					fill="none" 
+					viewBox="0 0 ${width} ${height}"
+					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 				>
-					${svgContent}
+					${svg}
 				</svg>
 			`;
         }
-        return nothing;
     }
     /**
      * Applies a part name to all paths in the given element

package/dist/components/responsive-svg/responsive-svg.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
+import { TemplateResult } from 'lit';
 declare const meta: Meta;
 export default meta;
 type Props = {
@@ -8,8 +9,9 @@ type Props = {
     autofit: boolean;
     height: number;
     width: number;
-    svg: SVGElement | string;
+    svg: SVGElement | TemplateResult<2> | string;
 };
 type Story = StoryObj<Props>;
 export declare const SVG: Story;
+export declare const TemplateResult2: Story;
 //# sourceMappingURL=responsive-svg.stories.d.ts.map

package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAKhE,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,UAAU,GAAG,MAAM,CAAA;CAAE,CAAC;AAE3I,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAuB7B,eAAO,MAAM,GAAG,EAAE,KAWjB,CAAC"}
+{"version":3,"file":"responsive-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;CAAE,CAAC;AAE/J,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAuB7B,eAAO,MAAM,GAAG,EAAE,KAWjB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA"}

package/dist/components/responsive-svg/responsive-svg.stories.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, svg } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import ResponsiveSVGRaw from '../../assets/ResponsiveSVG.svg?raw';
 const meta = {
@@ -38,3 +38,15 @@ export const SVG = {
         svg: ResponsiveSVGRaw
     },
 };
+export const TemplateResult2 = {
+    ...Template,
+    args: {
+        fontSize: 128,
+        stroke: 'rebeccapurple',
+        fill: 'black',
+        autofit: false,
+        height: 128,
+        width: 128,
+        svg: svg `<path part="path" d="M 30 50 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"/>`
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
 	"type": "module",
@@ -97,4 +97,4 @@
 		"typescript": "latest",
 		"vite": "^7.2.6"
 	}
-}
+}