@alegendstale/holly-components 1.1.1 → 1.1.3

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,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;IAe9D,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"}
+{"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,CAAyD;IAGrE,OAAO,CAAC,QAAQ,CAAoD;IAGpE,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAyB9D,MAAM;IAsBN;;;;;;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,7 +4,7 @@ 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, svg, css, nothing } from 'lit';
+import { LitElement, html, 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';
@@ -19,7 +19,7 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         this.width = 0;
         /** Must use a property expression (.) to set */
         this.svg = '';
-        this._svg = svg ``;
+        this._svg = nothing;
         this._viewBox = { x: 0, y: 0, width: 0, height: 0 };
     }
     // For classes inheriting from responsive-svg (e.g. draw-svg)
@@ -27,30 +27,48 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         return {};
     }
     willUpdate(_changedProperties) {
-        super.willUpdate(_changedProperties);
         if (_changedProperties.has('svg')) {
-            const svgSource = this.svg instanceof SVGElement ? this.svg : isTemplateResult(this.svg) ? this.svg : parseSVG(this.svg);
-            if (svgSource == null)
-                throw Error('Provided SVG is not valid.');
-            this._svg = svgSource;
-            if (svgSource instanceof Element) {
-                this._viewBox = this.getViewBoxSize(svgSource) || { x: 0, y: 0, width: 0, height: 0 };
+            try {
+                // Return early if SVG hasn't been set
+                if (this.svg === '')
+                    return;
+                this._svg = this.svg instanceof SVGElement
+                    ? this.svg : isTemplateResult(this.svg)
+                    ? this.svg : parseSVG(this.svg);
+                if (this._svg instanceof SVGElement) {
+                    const viewBox = this.getViewBoxSize(this._svg);
+                    const width = Number(this._svg.getAttribute('width'));
+                    const height = Number(this._svg.getAttribute('height'));
+                    // Use viewbox values first, otherwise use height and width attributes.
+                    this._viewBox = viewBox ?? { x: 0, y: 0, width: width || 0, height: height || 0 };
+                }
+            }
+            catch (e) {
+                console.warn(e);
             }
         }
     }
     render() {
         const width = this.width !== 0 ? this.width : this._viewBox.width;
         const height = this.height !== 0 ? this.height : this._viewBox.height;
-        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
+        // Check if svg exits, otherwise early return
+        if (this._svg === nothing)
             return nothing;
+        else {
+            // SVGElement provided as input
+            if (this._svg instanceof Element) {
+                if (this._svg instanceof SVGElement) {
+                    const clonedSVG = this._svg.cloneNode(true);
+                    this.applyPartToPaths(clonedSVG, 'path');
+                    return this.buildSVG(Array.from(clonedSVG.children), width, height);
+                }
+                else
+                    return html `<p style="font-size: initial;">⚠️ SVG Error</p>`;
+            }
+            // TemplateResult<2> provided as input
+            else
+                return this.buildSVG(this._svg, width, height);
+        }
     }
     /**
      * Builds an SVG from an Element or TemplateResult<2> input

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

@@ -14,5 +14,8 @@ type Props = {
 type Story = StoryObj<Props>;
 export declare const SVG: Story;
 export declare const TemplateResult2: Story;
+export declare const ServicesBottom: Story;
+export declare const EmptyString: Story;
 export declare const Invalid: Story;
+export declare const SVGWithoutViewBox: 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;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,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,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;AAMhD,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,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAC"}

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

@@ -1,6 +1,8 @@
 import { html, svg } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import ResponsiveSVGRaw from '../../assets/ResponsiveSVG.svg?raw';
+import ServicesBottomRaw from '../../assets/services-bottom.svg?raw';
+import GotLeakz from '../../assets/GotLeakz.svg?raw';
 const meta = {
     title: 'Responsive SVG',
     tags: ['autodocs'],
@@ -50,7 +52,19 @@ export const TemplateResult2 = {
         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"/>`
     }
 };
-export const Invalid = {
+export const ServicesBottom = {
+    ...Template,
+    args: {
+        fontSize: 128,
+        stroke: 'rebeccapurple',
+        fill: 'black',
+        autofit: false,
+        height: 128,
+        width: 128,
+        svg: ServicesBottomRaw
+    }
+};
+export const EmptyString = {
     ...Template,
     args: {
         fontSize: 128,
@@ -62,3 +76,27 @@ export const Invalid = {
         svg: ''
     },
 };
+export const Invalid = {
+    ...Template,
+    args: {
+        fontSize: 128,
+        stroke: 'rebeccapurple',
+        fill: 'black',
+        autofit: false,
+        height: 0,
+        width: 0,
+        svg: 'test'
+    },
+};
+export const SVGWithoutViewBox = {
+    ...Template,
+    args: {
+        fontSize: 128,
+        stroke: 'rebeccapurple',
+        fill: 'black',
+        autofit: false,
+        height: 0,
+        width: 0,
+        svg: GotLeakz
+    },
+};

package/dist/utils/basicUtils.d.ts

@@ -49,7 +49,7 @@ export declare function isColorValid(color: string | CommonColorTuple | CommonCo
 /**
  * Parse a raw string based SVG
  * @param rawSVG SVG represented as a string
- * @returns SVG element if it could be parsed
+ * @returns SVGElement | parsererror if parse failed
  */
-export declare function parseSVG(rawSVG: string): SVGSVGElement | null;
+export declare function parseSVG(rawSVG: string): SVGElement | Element;
 //# sourceMappingURL=basicUtils.d.ts.map

package/dist/utils/basicUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basicUtils.d.ts","sourceRoot":"","sources":["../../src/utils/basicUtils.ts"],"names":[],"mappings":"AAAA,OAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAO,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAmB,MAAM,oDAAoD,CAAC;AAExI;;GAEG;AACH,wBAAgB,mBAAmB,CAAE,QAAQ,EAAE,eAAe,wCAsB7D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,QAAQ,EAAE,eAAe,GAAG,oBAAoB,WAUnF;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAE,QAAQ,EAAE,eAAe,sBAGrE;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,eAAe,OAY9D;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,YAQnC;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,oBAAoB,GAAG,eAAe,CAW7F;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAA,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAAE,GAAG,MAAM,GAAG,MAAM,CAGnH;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAMxC;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,UAAU,iBAU1E;AAED;;EAEE;AACF,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,UAItD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,OAAO,CAS1F;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,wBAItC"}
+{"version":3,"file":"basicUtils.d.ts","sourceRoot":"","sources":["../../src/utils/basicUtils.ts"],"names":[],"mappings":"AAAA,OAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAO,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAmB,MAAM,oDAAoD,CAAC;AAExI;;GAEG;AACH,wBAAgB,mBAAmB,CAAE,QAAQ,EAAE,eAAe,wCAsB7D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,QAAQ,EAAE,eAAe,GAAG,oBAAoB,WAUnF;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAE,QAAQ,EAAE,eAAe,sBAGrE;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,eAAe,OAY9D;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,YAQnC;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,oBAAoB,GAAG,eAAe,CAW7F;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAA,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAAE,GAAG,MAAM,GAAG,MAAM,CAGnH;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAMxC;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,UAAU,iBAU1E;AAED;;EAEE;AACF,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,UAItD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,OAAO,CAS1F;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAI7D"}

package/dist/utils/basicUtils.js

@@ -151,10 +151,10 @@ export function isColorValid(color) {
 /**
  * Parse a raw string based SVG
  * @param rawSVG SVG represented as a string
- * @returns SVG element if it could be parsed
+ * @returns SVGElement | parsererror if parse failed
  */
 export function parseSVG(rawSVG) {
     const parser = new DOMParser();
-    const svgDoc = parser.parseFromString(rawSVG, 'image/svg+xml');
-    return svgDoc.querySelector('svg');
+    const xmlDoc = parser.parseFromString(rawSVG, 'image/svg+xml');
+    return xmlDoc.querySelector('svg') ?? xmlDoc.querySelector('parsererror');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "1.1.1",
+	"version": "1.1.3",
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
 	"type": "module",