@alegendstale/holly-components/dist/components/responsive-svg/responsive-svg.js

Reusable UI components created using lit

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    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, css, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { condCustomElement } from '../../decorators/condCustomElement.js';
let ResponsiveSvg = class ResponsiveSvg extends LitElement {
    constructor() {
        super(...arguments);
        this.height = 0;
        this.width = 0;
        this.svgFragment = nothing;
        this.autofit = false;
    }
    render() {
        const styles = {
            '--svg-width': `${this.width}em`,
            '--svg-height': `${this.height}em`,
        };
        return html `
			<svg
				part="svg"
				style=${styleMap(styles)} 
				viewBox="0 0 ${this.width} ${this.height}" 
				fill="none" 
				xmlns="http://www.w3.org/2000/svg"
			>
				${this.svgFragment}
			</svg>
		`;
    }
};
ResponsiveSvg.styles = [
    css `
			:host {
				display: block;
				--svg-width: 0;
				--svg-height: 0;
				--scale: 1;
			}
			
			:host([autofit]) {
				width: 100%;
				height: 100%;
			}

			/* Size scaling based on font-size */
			:host(:not([autofit])) {
				/* Removes extra space from under SVG */
				display: flex;
			}

			:host(:not([autofit])) svg {
				/* Allow SVG to be manipulated by font size */
				display: inline-block;
				/* Change SVG size using font-size */
				font-size: inherit;
				/* Remove extra vertical space in inline element reserved for character descenders */
				vertical-align: top;

				width: calc(var(--svg-width) / 100 * var(--scale));
				height: calc(var(--svg-height) / 100 * var(--scale));
			}

			svg {
				/* Inherit fill to bypass default */
				fill: inherit;

				max-width: 100%;
				max-height: 100%;
			}

			path {
				fill: inherit;
				stroke: inherit;
			}
		`,
];
__decorate([
    property({ type: Number, reflect: true })
], ResponsiveSvg.prototype, "height", void 0);
__decorate([
    property({ type: Number, reflect: true })
], ResponsiveSvg.prototype, "width", void 0);
__decorate([
    property({ type: Object })
], ResponsiveSvg.prototype, "svgFragment", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ResponsiveSvg.prototype, "autofit", void 0);
ResponsiveSvg = __decorate([
    condCustomElement('responsive-svg')
], ResponsiveSvg);
export { ResponsiveSvg };