@alegendstale/holly-components 1.0.1 → 1.1.0
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/draw-svg/draw-svg.d.ts +1 -1
- package/dist/components/draw-svg/draw-svg.d.ts.map +1 -1
- package/dist/components/draw-svg/draw-svg.js +7 -23
- package/dist/components/draw-svg/draw-svg.stories.d.ts +4 -2
- package/dist/components/draw-svg/draw-svg.stories.d.ts.map +1 -1
- package/dist/components/draw-svg/draw-svg.stories.js +13 -11
- package/dist/components/responsive-svg/responsive-svg.d.ts +33 -4
- package/dist/components/responsive-svg/responsive-svg.d.ts.map +1 -1
- package/dist/components/responsive-svg/responsive-svg.js +96 -22
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts +7 -3
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +1 -1
- package/dist/components/responsive-svg/responsive-svg.stories.js +26 -13
- package/dist/utils/basicUtils.d.ts +6 -0
- package/dist/utils/basicUtils.d.ts.map +1 -1
- package/dist/utils/basicUtils.js +10 -0
- package/package.json +1 -1
|
@@ -6,11 +6,11 @@ type EventMap = {
|
|
|
6
6
|
export declare class DrawSvg extends ResponsiveSvg {
|
|
7
7
|
static styles: import("lit").CSSResult[];
|
|
8
8
|
isIntersecting: boolean;
|
|
9
|
+
protected svgClasses(): {};
|
|
9
10
|
protected intersectionObserver: IntersectionObserver;
|
|
10
11
|
emitter: EventEmitter<EventMap>;
|
|
11
12
|
connectedCallback(): void;
|
|
12
13
|
disconnectedCallback(): void;
|
|
13
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
14
14
|
}
|
|
15
15
|
declare global {
|
|
16
16
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"draw-svg.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"draw-svg.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,YAAY,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAED,qBACa,OAAQ,SAAQ,aAAa;IACzC,MAAM,CAAC,MAAM,4BAoCX;IAGF,cAAc,EAAE,OAAO,CAAS;IAEhC,SAAS,CAAC,UAAU,IAAI,EAAE;IAQ1B,SAAS,CAAC,oBAAoB,uBAG5B;IAEK,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAsB;IAE5D,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;CAK5B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -4,10 +4,8 @@ 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 {
|
|
7
|
+
import { css } from 'lit';
|
|
8
8
|
import { state } from 'lit/decorators.js';
|
|
9
|
-
import { styleMap } from 'lit/directives/style-map.js';
|
|
10
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
11
9
|
import { ResponsiveSvg } from '../responsive-svg/responsive-svg.js';
|
|
12
10
|
import { EventEmitter } from '../../utils/EventEmitter.js';
|
|
13
11
|
import { condCustomElement } from '../../decorators/condCustomElement.js';
|
|
@@ -21,6 +19,12 @@ let DrawSvg = class DrawSvg extends ResponsiveSvg {
|
|
|
21
19
|
});
|
|
22
20
|
this.emitter = new EventEmitter();
|
|
23
21
|
}
|
|
22
|
+
svgClasses() {
|
|
23
|
+
super.svgClasses();
|
|
24
|
+
return {
|
|
25
|
+
animation: this.isIntersecting
|
|
26
|
+
};
|
|
27
|
+
}
|
|
24
28
|
connectedCallback() {
|
|
25
29
|
super.connectedCallback();
|
|
26
30
|
this.intersectionObserver.observe(this);
|
|
@@ -29,26 +33,6 @@ let DrawSvg = class DrawSvg extends ResponsiveSvg {
|
|
|
29
33
|
super.disconnectedCallback();
|
|
30
34
|
this.intersectionObserver.disconnect();
|
|
31
35
|
}
|
|
32
|
-
render() {
|
|
33
|
-
const styles = {
|
|
34
|
-
'--svg-width': `${this.width}em`,
|
|
35
|
-
'--svg-height': `${this.height}em`,
|
|
36
|
-
};
|
|
37
|
-
const classes = {
|
|
38
|
-
animation: this.isIntersecting
|
|
39
|
-
};
|
|
40
|
-
return html `
|
|
41
|
-
<svg
|
|
42
|
-
class=${classMap(classes)}
|
|
43
|
-
style=${styleMap(styles)}
|
|
44
|
-
viewBox="0 0 ${this.width} ${this.height}"
|
|
45
|
-
fill="none"
|
|
46
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
47
|
-
>
|
|
48
|
-
${this.svgFragment}
|
|
49
|
-
</svg>
|
|
50
|
-
`;
|
|
51
|
-
}
|
|
52
36
|
};
|
|
53
37
|
DrawSvg.styles = [
|
|
54
38
|
...ResponsiveSvg.styles,
|
|
@@ -2,11 +2,13 @@ import type { Meta, StoryObj } from '@storybook/web-components';
|
|
|
2
2
|
declare const meta: Meta;
|
|
3
3
|
export default meta;
|
|
4
4
|
type Props = {
|
|
5
|
-
|
|
5
|
+
fontSize: number;
|
|
6
6
|
stroke: string;
|
|
7
7
|
fill: string;
|
|
8
|
-
fontSize: number;
|
|
9
8
|
autofit: boolean;
|
|
9
|
+
height: number;
|
|
10
|
+
width: number;
|
|
11
|
+
svg: SVGElement | string;
|
|
10
12
|
};
|
|
11
13
|
type Story = StoryObj<Props>;
|
|
12
14
|
export declare const DrawSVG: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"draw-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"draw-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-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;AA6B7B,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { html
|
|
1
|
+
import { html } from 'lit';
|
|
2
2
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
3
|
-
|
|
3
|
+
import DrawSVGRaw from '../../assets/DrawSVG.svg?raw';
|
|
4
4
|
const meta = {
|
|
5
5
|
title: 'Draw SVG',
|
|
6
6
|
tags: ['autodocs'],
|
|
@@ -8,8 +8,7 @@ const meta = {
|
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
10
|
const Template = {
|
|
11
|
-
render: ({
|
|
12
|
-
const DrawSVG = svg `<path part="PathPart" d=${svgPath}`;
|
|
11
|
+
render: ({ fontSize, stroke, fill, autofit, height, width, svg }) => {
|
|
13
12
|
const styles = {
|
|
14
13
|
stroke,
|
|
15
14
|
fill,
|
|
@@ -17,17 +16,17 @@ const Template = {
|
|
|
17
16
|
};
|
|
18
17
|
return html `
|
|
19
18
|
<style>
|
|
20
|
-
draw-svg::part(
|
|
19
|
+
draw-svg::part(svg-path) {
|
|
21
20
|
animation-iteration-count: infinite;
|
|
22
21
|
}
|
|
23
22
|
</style>
|
|
24
23
|
|
|
25
24
|
<draw-svg
|
|
26
|
-
.svgFragment=${DrawSVG}
|
|
27
|
-
width=${645}
|
|
28
|
-
height=${122}
|
|
29
|
-
style=${styleMap(styles)}
|
|
30
25
|
?autofit=${autofit}
|
|
26
|
+
height=${height}
|
|
27
|
+
width=${width}
|
|
28
|
+
.svg=${svg}
|
|
29
|
+
style=${styleMap(styles)}
|
|
31
30
|
>
|
|
32
31
|
</draw-svg>
|
|
33
32
|
`;
|
|
@@ -36,9 +35,12 @@ const Template = {
|
|
|
36
35
|
export const DrawSVG = {
|
|
37
36
|
...Template,
|
|
38
37
|
args: {
|
|
39
|
-
|
|
38
|
+
fontSize: 128,
|
|
40
39
|
stroke: 'red',
|
|
41
40
|
fill: 'black',
|
|
42
|
-
|
|
41
|
+
autofit: false,
|
|
42
|
+
height: 0,
|
|
43
|
+
width: 0,
|
|
44
|
+
svg: DrawSVGRaw
|
|
43
45
|
},
|
|
44
46
|
};
|
|
@@ -1,15 +1,44 @@
|
|
|
1
|
-
import { LitElement,
|
|
1
|
+
import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
type ViewBoxType = {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
};
|
|
2
8
|
export declare class ResponsiveSvg extends LitElement {
|
|
3
9
|
static styles: import("lit").CSSResult[];
|
|
10
|
+
autofit: boolean;
|
|
4
11
|
height: number;
|
|
5
12
|
width: number;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
13
|
+
/** Must use a property expression (.) to set */
|
|
14
|
+
svg: SVGElement | TemplateResult<2> | string;
|
|
15
|
+
private _svg;
|
|
16
|
+
private _viewBox;
|
|
17
|
+
protected svgClasses(): {};
|
|
18
|
+
protected willUpdate(_changedProperties: PropertyValues): void;
|
|
19
|
+
render(): TemplateResult<1> | typeof nothing | undefined;
|
|
20
|
+
/**
|
|
21
|
+
* Builds an SVG from an Element or TemplateResult<2> input
|
|
22
|
+
* @param svg
|
|
23
|
+
* @param width
|
|
24
|
+
* @param height
|
|
25
|
+
* @returns
|
|
26
|
+
*/
|
|
27
|
+
private buildSVG;
|
|
28
|
+
/**
|
|
29
|
+
* Applies a part name to all paths in the given element
|
|
30
|
+
*/
|
|
31
|
+
private applyPartToPaths;
|
|
32
|
+
/**
|
|
33
|
+
* @param svg
|
|
34
|
+
* @returns The SVG viewbox x, y, width, and height
|
|
35
|
+
*/
|
|
36
|
+
getViewBoxSize(svg: SVGElement): ViewBoxType | null;
|
|
9
37
|
}
|
|
10
38
|
declare global {
|
|
11
39
|
interface HTMLElementTagNameMap {
|
|
12
40
|
'responsive-svg': ResponsiveSvg;
|
|
13
41
|
}
|
|
14
42
|
}
|
|
43
|
+
export {};
|
|
15
44
|
//# sourceMappingURL=responsive-svg.d.ts.map
|
|
@@ -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,
|
|
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"}
|
|
@@ -4,34 +4,102 @@ 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, css, nothing } from 'lit';
|
|
8
|
-
import { property } from 'lit/decorators.js';
|
|
7
|
+
import { LitElement, html, svg, css, nothing } from 'lit';
|
|
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';
|
|
11
|
+
import { parseSVG } from '../../utils/basicUtils.js';
|
|
12
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
13
|
+
import { isTemplateResult } from 'lit/directive-helpers.js';
|
|
11
14
|
let ResponsiveSvg = class ResponsiveSvg extends LitElement {
|
|
12
15
|
constructor() {
|
|
13
16
|
super(...arguments);
|
|
17
|
+
this.autofit = false;
|
|
14
18
|
this.height = 0;
|
|
15
19
|
this.width = 0;
|
|
16
|
-
|
|
17
|
-
this.
|
|
20
|
+
/** Must use a property expression (.) to set */
|
|
21
|
+
this.svg = '';
|
|
22
|
+
this._svg = svg ``;
|
|
23
|
+
this._viewBox = { x: 0, y: 0, width: 0, height: 0 };
|
|
24
|
+
}
|
|
25
|
+
// For classes inheriting from responsive-svg (e.g. draw-svg)
|
|
26
|
+
svgClasses() {
|
|
27
|
+
return {};
|
|
28
|
+
}
|
|
29
|
+
willUpdate(_changedProperties) {
|
|
30
|
+
super.willUpdate(_changedProperties);
|
|
31
|
+
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 };
|
|
36
|
+
}
|
|
37
|
+
}
|
|
18
38
|
}
|
|
19
39
|
render() {
|
|
40
|
+
const width = this.width !== 0 ? this.width : this._viewBox.width;
|
|
41
|
+
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
|
|
51
|
+
return nothing;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Builds an SVG from an Element or TemplateResult<2> input
|
|
55
|
+
* @param svg
|
|
56
|
+
* @param width
|
|
57
|
+
* @param height
|
|
58
|
+
* @returns
|
|
59
|
+
*/
|
|
60
|
+
buildSVG(svg, width, height) {
|
|
20
61
|
const styles = {
|
|
21
|
-
'--svg-width': `${
|
|
22
|
-
'--svg-height': `${
|
|
62
|
+
'--svg-width': `${width}em`,
|
|
63
|
+
'--svg-height': `${height}em`,
|
|
23
64
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
65
|
+
if (svg) {
|
|
66
|
+
return html `
|
|
67
|
+
<svg
|
|
68
|
+
part="svg"
|
|
69
|
+
class=${classMap(this.svgClasses())}
|
|
70
|
+
style=${styleMap(styles)}
|
|
71
|
+
viewBox="0 0 ${width} ${height}"
|
|
72
|
+
fill="none"
|
|
73
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
74
|
+
>
|
|
75
|
+
${svg}
|
|
76
|
+
</svg>
|
|
77
|
+
`;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Applies a part name to all paths in the given element
|
|
82
|
+
*/
|
|
83
|
+
applyPartToPaths(element, partValue) {
|
|
84
|
+
if (element instanceof Element) {
|
|
85
|
+
if (element.tagName.toLowerCase() === 'path') {
|
|
86
|
+
element.setAttribute('part', partValue);
|
|
87
|
+
}
|
|
88
|
+
// Recursively check each child
|
|
89
|
+
for (const child of Array.from(element.children)) {
|
|
90
|
+
this.applyPartToPaths(child, partValue);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* @param svg
|
|
96
|
+
* @returns The SVG viewbox x, y, width, and height
|
|
97
|
+
*/
|
|
98
|
+
getViewBoxSize(svg) {
|
|
99
|
+
const viewBox = svg.getAttribute('viewBox')?.split(' ');
|
|
100
|
+
if (!viewBox)
|
|
101
|
+
return null;
|
|
102
|
+
return { x: +viewBox[0], y: +viewBox[1], width: +viewBox[2], height: +viewBox[3] };
|
|
35
103
|
}
|
|
36
104
|
};
|
|
37
105
|
ResponsiveSvg.styles = [
|
|
@@ -81,17 +149,23 @@ ResponsiveSvg.styles = [
|
|
|
81
149
|
`,
|
|
82
150
|
];
|
|
83
151
|
__decorate([
|
|
84
|
-
property({ type:
|
|
152
|
+
property({ type: Boolean, reflect: true })
|
|
153
|
+
], ResponsiveSvg.prototype, "autofit", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
property({ type: Number })
|
|
85
156
|
], ResponsiveSvg.prototype, "height", void 0);
|
|
86
157
|
__decorate([
|
|
87
|
-
property({ type: Number
|
|
158
|
+
property({ type: Number })
|
|
88
159
|
], ResponsiveSvg.prototype, "width", void 0);
|
|
89
160
|
__decorate([
|
|
90
161
|
property({ type: Object })
|
|
91
|
-
], ResponsiveSvg.prototype, "
|
|
162
|
+
], ResponsiveSvg.prototype, "svg", void 0);
|
|
92
163
|
__decorate([
|
|
93
|
-
|
|
94
|
-
], ResponsiveSvg.prototype, "
|
|
164
|
+
state()
|
|
165
|
+
], ResponsiveSvg.prototype, "_svg", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
state()
|
|
168
|
+
], ResponsiveSvg.prototype, "_viewBox", void 0);
|
|
95
169
|
ResponsiveSvg = __decorate([
|
|
96
170
|
condCustomElement('responsive-svg')
|
|
97
171
|
], ResponsiveSvg);
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
2
3
|
declare const meta: Meta;
|
|
3
4
|
export default meta;
|
|
4
5
|
type Props = {
|
|
5
|
-
|
|
6
|
+
fontSize: number;
|
|
6
7
|
stroke: string;
|
|
7
8
|
fill: string;
|
|
8
|
-
fontSize: number;
|
|
9
9
|
autofit: boolean;
|
|
10
|
+
height: number;
|
|
11
|
+
width: number;
|
|
12
|
+
svg: SVGElement | TemplateResult<2> | string;
|
|
10
13
|
};
|
|
11
14
|
type Story = StoryObj<Props>;
|
|
12
|
-
export declare const
|
|
15
|
+
export declare const SVG: Story;
|
|
16
|
+
export declare const TemplateResult2: Story;
|
|
13
17
|
//# 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;
|
|
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,6 +1,6 @@
|
|
|
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
4
|
const meta = {
|
|
5
5
|
title: 'Responsive SVG',
|
|
6
6
|
tags: ['autodocs'],
|
|
@@ -8,32 +8,45 @@ const meta = {
|
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
10
|
const Template = {
|
|
11
|
-
render: ({
|
|
12
|
-
const ResponsiveSVG = svg `<path d=${svgPath}`;
|
|
11
|
+
render: ({ fontSize, stroke, fill, autofit, height, width, svg }) => {
|
|
13
12
|
const styles = {
|
|
13
|
+
'font-size': `${fontSize}px`,
|
|
14
14
|
stroke,
|
|
15
|
-
fill
|
|
16
|
-
'font-size': `${fontSize}px`
|
|
15
|
+
fill
|
|
17
16
|
};
|
|
18
17
|
return html `
|
|
19
18
|
<responsive-svg
|
|
20
|
-
.svgFragment=${ResponsiveSVG}
|
|
21
|
-
width=${645}
|
|
22
|
-
height=${122}
|
|
23
|
-
style=${styleMap(styles)}
|
|
24
19
|
?autofit=${autofit}
|
|
20
|
+
height=${height}
|
|
21
|
+
width=${width}
|
|
22
|
+
.svg=${svg}
|
|
23
|
+
style=${styleMap(styles)}
|
|
25
24
|
>
|
|
26
25
|
</responsive-svg>
|
|
27
26
|
`;
|
|
28
27
|
},
|
|
29
28
|
};
|
|
30
|
-
export const
|
|
29
|
+
export const SVG = {
|
|
31
30
|
...Template,
|
|
32
31
|
args: {
|
|
33
|
-
|
|
32
|
+
fontSize: 128,
|
|
34
33
|
stroke: 'rebeccapurple',
|
|
35
34
|
fill: 'black',
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
autofit: false,
|
|
36
|
+
height: 0,
|
|
37
|
+
width: 0,
|
|
38
|
+
svg: ResponsiveSVGRaw
|
|
38
39
|
},
|
|
39
40
|
};
|
|
41
|
+
export const TemplateResult2 = {
|
|
42
|
+
...Template,
|
|
43
|
+
args: {
|
|
44
|
+
fontSize: 128,
|
|
45
|
+
stroke: 'rebeccapurple',
|
|
46
|
+
fill: 'black',
|
|
47
|
+
autofit: false,
|
|
48
|
+
height: 128,
|
|
49
|
+
width: 128,
|
|
50
|
+
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
|
+
};
|
|
@@ -46,4 +46,10 @@ export declare function copyToClipboard(text: string, copyFormat?: CopyFormat):
|
|
|
46
46
|
*/
|
|
47
47
|
export declare function getAdjustedFontSize(colorsCount: number): number;
|
|
48
48
|
export declare function isColorValid(color: string | CommonColorTuple | CommonColoraTuple): boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Parse a raw string based SVG
|
|
51
|
+
* @param rawSVG SVG represented as a string
|
|
52
|
+
* @returns SVG element if it could be parsed
|
|
53
|
+
*/
|
|
54
|
+
export declare function parseSVG(rawSVG: string): SVGSVGElement | null;
|
|
49
55
|
//# sourceMappingURL=basicUtils.d.ts.map
|
|
@@ -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"}
|
|
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"}
|
package/dist/utils/basicUtils.js
CHANGED
|
@@ -148,3 +148,13 @@ export function isColorValid(color) {
|
|
|
148
148
|
return false;
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
|
+
/**
|
|
152
|
+
* Parse a raw string based SVG
|
|
153
|
+
* @param rawSVG SVG represented as a string
|
|
154
|
+
* @returns SVG element if it could be parsed
|
|
155
|
+
*/
|
|
156
|
+
export function parseSVG(rawSVG) {
|
|
157
|
+
const parser = new DOMParser();
|
|
158
|
+
const svgDoc = parser.parseFromString(rawSVG, 'image/svg+xml');
|
|
159
|
+
return svgDoc.querySelector('svg');
|
|
160
|
+
}
|