@alegendstale/holly-components 1.1.2 → 1.2.0

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

@@ -5,6 +5,10 @@ type ViewBoxType = {
     width: number;
     height: number;
 };
+export type PreserveAspectRatioAlign = "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax";
+export type PreserveAspectRatioSpacing = "meet" | "slice";
+export type CombinedAlignSpacing = `${PreserveAspectRatioAlign} ${PreserveAspectRatioSpacing}`;
+export type PreserveAspectRatio = PreserveAspectRatioAlign | CombinedAlignSpacing;
 export declare class ResponsiveSvg extends LitElement {
     static styles: import("lit").CSSResult[];
     autofit: boolean;
@@ -12,8 +16,10 @@ export declare class ResponsiveSvg extends LitElement {
     width: number;
     /** Must use a property expression (.) to set */
     svg: SVGElement | TemplateResult<2> | string;
+    preserveAspectRatio: PreserveAspectRatio;
     private _svg;
     private _viewBox;
+    private _preserveAspectRatio?;
     protected svgClasses(): {};
     protected willUpdate(_changedProperties: PropertyValues): void;
     render(): TemplateResult<1> | typeof nothing | undefined;

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,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"}
+{"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,MAAM,MAAM,wBAAwB,GAClC,MAAM,GACN,UAAU,GAAG,UAAU,GAAG,UAAU,GACpC,UAAU,GAAG,UAAU,GAAG,UAAU,GACpC,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AAEtC,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,MAAM,MAAM,oBAAoB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;AAE/F,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,GAAG,oBAAoB,CAAC;AAElF,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,mBAAmB,EAAE,mBAAmB,CAAmB;IAG3D,OAAO,CAAC,IAAI,CAAyD;IAGrE,OAAO,CAAC,QAAQ,CAAoD;IAGpE,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAGtC,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IA0B9D,MAAM;IAsBN;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAuBhB;;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

@@ -19,6 +19,7 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         this.width = 0;
         /** Must use a property expression (.) to set */
         this.svg = '';
+        this.preserveAspectRatio = 'xMidYMid meet';
         this._svg = nothing;
         this._viewBox = { x: 0, y: 0, width: 0, height: 0 };
     }
@@ -35,8 +36,14 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
                 this._svg = this.svg instanceof SVGElement
                     ? this.svg : isTemplateResult(this.svg)
                     ? this.svg : parseSVG(this.svg);
-                if (this._svg instanceof SVGElement)
-                    this._viewBox = this.getViewBoxSize(this._svg) || { x: 0, y: 0, width: 0, height: 0 };
+                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 };
+                    this._preserveAspectRatio = this._svg.getAttribute('preserveAspectRatio') || undefined;
+                }
             }
             catch (e) {
                 console.warn(e);
@@ -85,6 +92,7 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
 					style=${styleMap(styles)}
 					viewBox="0 0 ${width} ${height}"
 					fill="none"
+					preserveAspectRatio=${this.preserveAspectRatio || this._preserveAspectRatio}
 					xmlns="http://www.w3.org/2000/svg"
 				>
 					${svg}
@@ -175,12 +183,18 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], ResponsiveSvg.prototype, "svg", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ResponsiveSvg.prototype, "preserveAspectRatio", void 0);
 __decorate([
     state()
 ], ResponsiveSvg.prototype, "_svg", void 0);
 __decorate([
     state()
 ], ResponsiveSvg.prototype, "_viewBox", void 0);
+__decorate([
+    state()
+], ResponsiveSvg.prototype, "_preserveAspectRatio", void 0);
 ResponsiveSvg = __decorate([
     condCustomElement('responsive-svg')
 ], ResponsiveSvg);

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { TemplateResult } from 'lit';
+import { PreserveAspectRatio } from './responsive-svg.js';
 declare const meta: Meta;
 export default meta;
 type Props = {
@@ -10,6 +11,7 @@ type Props = {
     height: number;
     width: number;
     svg: SVGElement | TemplateResult<2> | string;
+    preserveAspectRatio: PreserveAspectRatio;
 };
 type Story = StoryObj<Props>;
 export declare const SVG: Story;
@@ -17,4 +19,6 @@ 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;
+export declare const SVGWithoutWidthHeight: 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;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"}
+{"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,OAAO,EAAwD,mBAAmB,EAAwB,MAAM,qBAAqB,CAAC;AAiBtI,QAAA,MAAM,IAAI,EAAE,IAgCX,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,CAAC;IAAC,mBAAmB,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAEzM,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAwB7B,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;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC"}

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

@@ -2,14 +2,55 @@ 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';
+import ComicBackground from '../../assets/comic-background.svg?raw';
+const alignOptions = [
+    "none",
+    "xMinYMin", "xMidYMin", "xMaxYMin",
+    "xMinYMid", "xMidYMid", "xMaxYMid",
+    "xMinYMax", "xMidYMax", "xMaxYMax",
+];
+const spacingOptions = ["meet", "slice"];
+const allAspectRatios = [
+    ...alignOptions,
+    ...alignOptions.flatMap(align => spacingOptions.map(spacing => `${align} ${spacing}`))
+];
 const meta = {
     title: 'Responsive SVG',
     tags: ['autodocs'],
     component: 'responsive-svg',
+    argTypes: {
+        fontSize: {
+            control: {
+                type: 'number',
+                step: 8
+            }
+        },
+        stroke: {
+            control: {
+                type: 'color',
+                presetColors: [
+                    'rebeccapurple', 'black'
+                ]
+            }
+        },
+        fill: {
+            control: {
+                type: 'color',
+                presetColors: [
+                    'rebeccapurple', 'black'
+                ]
+            }
+        },
+        preserveAspectRatio: {
+            control: 'select',
+            options: allAspectRatios
+        },
+    }
 };
 export default meta;
 const Template = {
-    render: ({ fontSize, stroke, fill, autofit, height, width, svg }) => {
+    render: ({ fontSize, stroke, fill, autofit, height, width, svg, preserveAspectRatio = 'xMidYMid meet' }) => {
         const styles = {
             'font-size': `${fontSize}px`,
             stroke,
@@ -20,6 +61,7 @@ const Template = {
 				?autofit=${autofit}
 				height=${height}
 				width=${width}
+				.preserveAspectRatio=${preserveAspectRatio}
 				.svg=${svg}
 				style=${styleMap(styles)}
 			>
@@ -87,3 +129,28 @@ export const Invalid = {
         svg: 'test'
     },
 };
+export const SVGWithoutViewBox = {
+    ...Template,
+    args: {
+        fontSize: 128,
+        stroke: 'rebeccapurple',
+        fill: 'black',
+        autofit: false,
+        height: 0,
+        width: 0,
+        svg: GotLeakz
+    },
+};
+export const SVGWithoutWidthHeight = {
+    ...Template,
+    args: {
+        fontSize: 128,
+        stroke: 'rebeccapurple',
+        fill: 'black',
+        autofit: false,
+        height: 0,
+        width: 0,
+        svg: ComicBackground,
+        preserveAspectRatio: 'none'
+    },
+};

package/package.json

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