@claromentis/design-system
Version:
Claromentis Design System Component Library
158 lines (157 loc) • 4.41 kB
JavaScript
import { h } from '@stencil/core';
import { hasShadowDom, NodeListForEachIe11 } from "../../utils/utils";
import * as insigniaSvg from './insignia-svg.json';
/**
* @slot - Holds the cla-insignia-image
*/
export class Insignia {
constructor() {
this.svgObject = (shape, type, insigniaSvg) => {
return insigniaSvg[shape][type];
};
this.changeSvgColour = () => {
let loadedSvgPaths;
if (hasShadowDom(this.element)) {
loadedSvgPaths = this.element.shadowRoot.querySelectorAll("path");
}
else {
loadedSvgPaths = this.element.querySelectorAll("path");
NodeListForEachIe11();
}
loadedSvgPaths.forEach(element => {
let elementClass = element.getAttribute('class');
if (elementClass === "inner") {
element.setAttribute("style", "fill:" + this.colour);
}
else if (elementClass === "outer") {
element.setAttribute("style", "stroke:" + this.colour);
}
});
};
this.addNonShadowDomClass = (el) => {
if (!hasShadowDom(el)) {
let svg = el.querySelector("svg");
svg.setAttribute("class", "sc-cla-insignia");
}
};
this.colour = "#76cef9";
this.width = undefined;
this.shape = "hexagon";
this.type = "fill";
}
componentWillLoad() {
this.svgHtml = this.svgObject(this.shape, this.type, insigniaSvg);
}
componentWillUpdate() {
this.svgHtml = this.svgObject(this.shape, this.type, insigniaSvg);
}
componentDidLoad() {
this.addNonShadowDomClass(this.element);
this.changeSvgColour();
}
componentDidUpdate() {
this.addNonShadowDomClass(this.element);
this.changeSvgColour();
}
render() {
return (h("div", { style: { width: `${this.width}px` }, class: "insignia" }, h("slot", null), h("span", { class: "sc-cla-insignia", innerHTML: this.svgHtml })));
}
static get is() { return "cla-insignia"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-insignia.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-insignia.css"]
};
}
static get properties() {
return {
"colour": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The insignia colour."
},
"attribute": "colour",
"reflect": false,
"defaultValue": "\"#76cef9\""
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The insignia width."
},
"attribute": "width",
"reflect": false
},
"shape": {
"type": "string",
"mutable": false,
"complexType": {
"original": "InsigniaShapeType",
"resolved": "\"hexagon\"",
"references": {
"InsigniaShapeType": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The insignia shape: 'hexagon', '' or ''.\nDefault: 'hexagon'"
},
"attribute": "shape",
"reflect": false,
"defaultValue": "\"hexagon\""
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "InsigniaFillType",
"resolved": "\"empty\" | \"fill\" | \"outline\"",
"references": {
"InsigniaFillType": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The insignia fill option: 'fill', 'outline' or 'empty'.\nDefault: 'hexagon'"
},
"attribute": "type",
"reflect": false,
"defaultValue": "\"fill\""
}
};
}
static get elementRef() { return "element"; }
}