@alegendstale/holly-components 1.1.2 → 1.1.3
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.
- package/dist/components/responsive-svg/responsive-svg.d.ts.map +1 -1
- package/dist/components/responsive-svg/responsive-svg.js +7 -2
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts +1 -0
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +1 -1
- package/dist/components/responsive-svg/responsive-svg.stories.js +13 -0
- package/package.json +1 -1
|
@@ -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,CAAyD;IAGrE,OAAO,CAAC,QAAQ,CAAoD;IAGpE,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;
|
|
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;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"}
|
|
@@ -35,8 +35,13 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
|
|
|
35
35
|
this._svg = this.svg instanceof SVGElement
|
|
36
36
|
? this.svg : isTemplateResult(this.svg)
|
|
37
37
|
? this.svg : parseSVG(this.svg);
|
|
38
|
-
if (this._svg instanceof SVGElement)
|
|
39
|
-
|
|
38
|
+
if (this._svg instanceof SVGElement) {
|
|
39
|
+
const viewBox = this.getViewBoxSize(this._svg);
|
|
40
|
+
const width = Number(this._svg.getAttribute('width'));
|
|
41
|
+
const height = Number(this._svg.getAttribute('height'));
|
|
42
|
+
// Use viewbox values first, otherwise use height and width attributes.
|
|
43
|
+
this._viewBox = viewBox ?? { x: 0, y: 0, width: width || 0, height: height || 0 };
|
|
44
|
+
}
|
|
40
45
|
}
|
|
41
46
|
catch (e) {
|
|
42
47
|
console.warn(e);
|
|
@@ -17,4 +17,5 @@ export declare const TemplateResult2: Story;
|
|
|
17
17
|
export declare const ServicesBottom: Story;
|
|
18
18
|
export declare const EmptyString: Story;
|
|
19
19
|
export declare const Invalid: Story;
|
|
20
|
+
export declare const SVGWithoutViewBox: Story;
|
|
20
21
|
//# sourceMappingURL=responsive-svg.stories.d.ts.map
|
|
@@ -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;
|
|
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;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"}
|
|
@@ -2,6 +2,7 @@ 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
4
|
import ServicesBottomRaw from '../../assets/services-bottom.svg?raw';
|
|
5
|
+
import GotLeakz from '../../assets/GotLeakz.svg?raw';
|
|
5
6
|
const meta = {
|
|
6
7
|
title: 'Responsive SVG',
|
|
7
8
|
tags: ['autodocs'],
|
|
@@ -87,3 +88,15 @@ export const Invalid = {
|
|
|
87
88
|
svg: 'test'
|
|
88
89
|
},
|
|
89
90
|
};
|
|
91
|
+
export const SVGWithoutViewBox = {
|
|
92
|
+
...Template,
|
|
93
|
+
args: {
|
|
94
|
+
fontSize: 128,
|
|
95
|
+
stroke: 'rebeccapurple',
|
|
96
|
+
fill: 'black',
|
|
97
|
+
autofit: false,
|
|
98
|
+
height: 0,
|
|
99
|
+
width: 0,
|
|
100
|
+
svg: GotLeakz
|
|
101
|
+
},
|
|
102
|
+
};
|