@alegendstale/holly-components 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/responsive-svg/responsive-svg.d.ts.map +1 -1
  2. package/dist/components/responsive-svg/responsive-svg.js +31 -16
  3. package/dist/components/responsive-svg/responsive-svg.stories.d.ts +3 -0
  4. package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +1 -1
  5. package/dist/components/responsive-svg/responsive-svg.stories.js +37 -0
  6. package/dist/utils/basicUtils.d.ts +2 -2
  7. package/dist/utils/basicUtils.d.ts.map +1 -1
  8. package/dist/utils/basicUtils.js +3 -3
  9. package/package.json +2 -2
package/dist/components/responsive-svg/responsive-svg.d.ts.map CHANGED
@@ -1 +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;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"}
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,CAAyD;IAGrE,OAAO,CAAC,QAAQ,CAAoD;IAGpE,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAkB9D,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 CHANGED
@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  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;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- import { LitElement, html, svg, css, nothing } from 'lit';
7
+ import { LitElement, html, css, nothing } from 'lit';
8
8
  import { property, state } from 'lit/decorators.js';
9
9
  import { styleMap } from 'lit/directives/style-map.js';
10
10
  import { condCustomElement } from '../../decorators/condCustomElement.js';
@@ -19,7 +19,7 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
19
19
  this.width = 0;
20
20
  /** Must use a property expression (.) to set */
21
21
  this.svg = '';
22
- this._svg = svg ``;
22
+ this._svg = nothing;
23
23
  this._viewBox = { x: 0, y: 0, width: 0, height: 0 };
24
24
  }
25
25
  // For classes inheriting from responsive-svg (e.g. draw-svg)
@@ -27,28 +27,43 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
27
27
  return {};
28
28
  }
29
29
  willUpdate(_changedProperties) {
30
- super.willUpdate(_changedProperties);
31
30
  if (_changedProperties.has('svg')) {
32
- const svgSource = this.svg instanceof SVGElement ? this.svg : isTemplateResult(this.svg) ? this.svg : parseSVG(this.svg);
33
- this._svg = svgSource || svg ``;
34
- if (svgSource instanceof Element) {
35
- this._viewBox = this.getViewBoxSize(svgSource) || { x: 0, y: 0, width: 0, height: 0 };
31
+ try {
32
+ // Return early if SVG hasn't been set
33
+ if (this.svg === '')
34
+ return;
35
+ this._svg = this.svg instanceof SVGElement
36
+ ? this.svg : isTemplateResult(this.svg)
37
+ ? this.svg : parseSVG(this.svg);
38
+ if (this._svg instanceof SVGElement)
39
+ this._viewBox = this.getViewBoxSize(this._svg) || { x: 0, y: 0, width: 0, height: 0 };
40
+ }
41
+ catch (e) {
42
+ console.warn(e);
36
43
  }
37
44
  }
38
45
  }
39
46
  render() {
40
47
  const width = this.width !== 0 ? this.width : this._viewBox.width;
41
48
  const height = this.height !== 0 ? this.height : this._viewBox.height;
42
- if (this._svg instanceof Element) {
43
- const clonedSVG = this._svg.cloneNode(true);
44
- this.applyPartToPaths(clonedSVG, 'path');
45
- const svgContent = Array.from(clonedSVG.children);
46
- return this.buildSVG(svgContent, width, height);
47
- }
48
- else if (isTemplateResult(this._svg))
49
- return this.buildSVG(this._svg, width, height);
50
- else
49
+ // Check if svg exits, otherwise early return
50
+ if (this._svg === nothing)
51
51
  return nothing;
52
+ else {
53
+ // SVGElement provided as input
54
+ if (this._svg instanceof Element) {
55
+ if (this._svg instanceof SVGElement) {
56
+ const clonedSVG = this._svg.cloneNode(true);
57
+ this.applyPartToPaths(clonedSVG, 'path');
58
+ return this.buildSVG(Array.from(clonedSVG.children), width, height);
59
+ }
60
+ else
61
+ return html `<p style="font-size: initial;">⚠️ SVG Error</p>`;
62
+ }
63
+ // TemplateResult<2> provided as input
64
+ else
65
+ return this.buildSVG(this._svg, width, height);
66
+ }
52
67
  }
53
68
  /**
54
69
  * Builds an SVG from an Element or TemplateResult<2> input
package/dist/components/responsive-svg/responsive-svg.stories.d.ts CHANGED
@@ -14,4 +14,7 @@ type Props = {
14
14
  type Story = StoryObj<Props>;
15
15
  export declare const SVG: Story;
16
16
  export declare const TemplateResult2: Story;
17
+ export declare const ServicesBottom: Story;
18
+ export declare const EmptyString: Story;
19
+ export declare const Invalid: Story;
17
20
  //# sourceMappingURL=responsive-svg.stories.d.ts.map
package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map CHANGED
@@ -1 +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,CAAA"}
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;AAKhD,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"}
package/dist/components/responsive-svg/responsive-svg.stories.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { html, svg } from 'lit';
2
2
  import { styleMap } from 'lit/directives/style-map.js';
3
3
  import ResponsiveSVGRaw from '../../assets/ResponsiveSVG.svg?raw';
4
+ import ServicesBottomRaw from '../../assets/services-bottom.svg?raw';
4
5
  const meta = {
5
6
  title: 'Responsive SVG',
6
7
  tags: ['autodocs'],
@@ -50,3 +51,39 @@ export const TemplateResult2 = {
50
51
  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"/>`
51
52
  }
52
53
  };
54
+ export const ServicesBottom = {
55
+ ...Template,
56
+ args: {
57
+ fontSize: 128,
58
+ stroke: 'rebeccapurple',
59
+ fill: 'black',
60
+ autofit: false,
61
+ height: 128,
62
+ width: 128,
63
+ svg: ServicesBottomRaw
64
+ }
65
+ };
66
+ export const EmptyString = {
67
+ ...Template,
68
+ args: {
69
+ fontSize: 128,
70
+ stroke: 'rebeccapurple',
71
+ fill: 'black',
72
+ autofit: false,
73
+ height: 0,
74
+ width: 0,
75
+ svg: ''
76
+ },
77
+ };
78
+ export const Invalid = {
79
+ ...Template,
80
+ args: {
81
+ fontSize: 128,
82
+ stroke: 'rebeccapurple',
83
+ fill: 'black',
84
+ autofit: false,
85
+ height: 0,
86
+ width: 0,
87
+ svg: 'test'
88
+ },
89
+ };
package/dist/utils/basicUtils.d.ts CHANGED
@@ -49,7 +49,7 @@ export declare function isColorValid(color: string | CommonColorTuple | CommonCo
49
49
  /**
50
50
  * Parse a raw string based SVG
51
51
  * @param rawSVG SVG represented as a string
52
- * @returns SVG element if it could be parsed
52
+ * @returns SVGElement | parsererror if parse failed
53
53
  */
54
- export declare function parseSVG(rawSVG: string): SVGSVGElement | null;
54
+ export declare function parseSVG(rawSVG: string): SVGElement | Element;
55
55
  //# sourceMappingURL=basicUtils.d.ts.map
package/dist/utils/basicUtils.d.ts.map CHANGED
@@ -1 +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"}
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,GAAG,UAAU,GAAG,OAAO,CAI7D"}
package/dist/utils/basicUtils.js CHANGED
@@ -151,10 +151,10 @@ export function isColorValid(color) {
151
151
  /**
152
152
  * Parse a raw string based SVG
153
153
  * @param rawSVG SVG represented as a string
154
- * @returns SVG element if it could be parsed
154
+ * @returns SVGElement | parsererror if parse failed
155
155
  */
156
156
  export function parseSVG(rawSVG) {
157
157
  const parser = new DOMParser();
158
- const svgDoc = parser.parseFromString(rawSVG, 'image/svg+xml');
159
- return svgDoc.querySelector('svg');
158
+ const xmlDoc = parser.parseFromString(rawSVG, 'image/svg+xml');
159
+ return xmlDoc.querySelector('svg') ?? xmlDoc.querySelector('parsererror');
160
160
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "private": false,
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "name": "@alegendstale/holly-components",
5
5
  "description": "Reusable UI components created using lit",
6
6
  "type": "module",
@@ -97,4 +97,4 @@
97
97
  "typescript": "latest",
98
98
  "vite": "^7.2.6"
99
99
  }
100
- }
100
+ }