@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
231 lines (223 loc) • 9.21 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { p as proxyCustomElement, H, h, d as Host } from './p-AOwgnAK2.js';
import { c as createColorClasses } from './p-B02IfvGX.js';
import { b as isArrayLike, i as isArray, c as isBuffer, d as isTypedArray, e as isArguments, g as getTag, f as isPrototype, h as baseKeys } from './p-Cvhpe3ZV.js';
import { b as getIconMap } from './p-PgdWkWmb.js';
/** `Object#toString` result references. */
var mapTag = '[object Map]',
setTag = '[object Set]';
/** Used for built-in method references. */
var objectProto = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/**
* Checks if `value` is an empty object, collection, map, or set.
*
* Objects are considered empty if they have no own enumerable string keyed
* properties.
*
* Array-like values such as `arguments` objects, arrays, buffers, strings, or
* jQuery-like collections are considered empty if they have a `length` of `0`.
* Similarly, maps and sets are considered empty if they have a `size` of `0`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is empty, else `false`.
* @example
*
* _.isEmpty(null);
* // => true
*
* _.isEmpty(true);
* // => true
*
* _.isEmpty(1);
* // => true
*
* _.isEmpty([1, 2, 3]);
* // => false
*
* _.isEmpty({ 'a': 1 });
* // => false
*/
function isEmpty(value) {
if (value == null) {
return true;
}
if (isArrayLike(value) &&
(isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
isBuffer(value) || isTypedArray(value) || isArguments(value))) {
return !value.length;
}
var tag = getTag(value);
if (tag == mapTag || tag == setTag) {
return !value.size;
}
if (isPrototype(value)) {
return !baseKeys(value).length;
}
for (var key in value) {
if (hasOwnProperty.call(value, key)) {
return false;
}
}
return true;
}
const iconCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{display:inline-block;width:var(--lar-icon-size-small, 1rem);height:var(--lar-icon-size-small, 1rem);font-size:var(--lar-icon-size-small, 1rem) !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.lar-icon-medium){width:var(--lar-icon-size-medium, 1.5rem);height:var(--lar-icon-size-medium, 1.5rem);font-size:var(--lar-icon-size-medium, 1.5rem) !important}:host(.lar-icon-large){width:var(--lar-icon-size-large, 2rem);height:var(--lar-icon-size-large, 2rem);font-size:var(--lar-icon-size-large, 2rem) !important}.lar-icon-inner,.lar-icon-inner>div{display:block !important;height:100% !important;width:100% !important}:host(.lar-color-primary){fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-secondary){fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-tertiary){fill:var(--lar-color-tertiary, #00a6ed) !important;stroke:var(--lar-color-tertiary, #00a6ed) !important}:host(.lar-color-success){fill:var(--lar-color-success, #7fb800) !important;stroke:var(--lar-color-success, #7fb800) !important}:host(.lar-color-warning){fill:var(--lar-color-warning, #ffb400) !important;stroke:var(--lar-color-warning, #ffb400) !important}:host(.lar-color-danger){fill:var(--lar-color-danger, #f6511d) !important;stroke:var(--lar-color-danger, #f6511d) !important}:host(.lar-color-light){fill:var(--lar-color-light, #f4f5f8) !important;stroke:var(--lar-color-light, #f4f5f8) !important}:host(.lar-color-medium){fill:var(--lar-color-medium, #d6d6d6) !important;stroke:var(--lar-color-medium, #d6d6d6) !important}:host(.lar-color-dark){fill:var(--lar-color-dark, #222428) !important;stroke:var(--lar-color-dark, #222428) !important}";
const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
}
loadIcon() {
// Check if it's a named icon (from built-in icons)
if (!isEmpty(this.icon)) {
const svgContent = getIconMap().get(this.icon);
if (svgContent) {
// It's a built-in icon with inlined SVG
this.svgContent = validateContent(document, svgContent, this.el['s-sc']);
return;
}
}
// Handle src attribute (custom URL)
const url = getSrc(this.src);
if (!isEmpty(url)) {
getSvgContent(url).then(svgContent => {
this.svgContent = validateContent(document, svgContent, this.el['s-sc']);
});
}
}
componentWillLoad() {
this.loadIcon();
}
render() {
let ret;
if (!isEmpty(this.svgContent)) {
// we've already loaded up this svg at one point
// and the svg content we've loaded and assigned checks out
// render this svg!!
ret = h("div", { key: '525d0b09cd5a3dad9719ec9590598b3ac139c81a', class: "lar-icon-inner" }, h("div", { key: 'b27996d14010b096f467c3e205a56d85ecfa3f62', innerHTML: this.svgContent }));
}
else {
// actively requesting the svg
// or it's an SSR render
// so let's just render an empty div for now
ret = h("div", { key: '7b954444ae93d046aaa002e90d148325f7ee6f59', class: "lar-icon-inner" });
}
return (h(Host, { key: 'bc2ba9cd78548ef518300cf2d201897330862770', role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { [`lar-icon-${this.size}`]: (this.size === 'large' || this.size === 'small' || this.size === 'medium') }) }, ret));
}
static get assetsDirs() { return ["assets"]; }
get el() { return this; }
static get watchers() { return {
"icon": ["loadIcon"],
"src": ["loadIcon"]
}; }
static get style() { return iconCss; }
}, [257, "lar-icon", {
"color": [1],
"icon": [1],
"src": [1],
"size": [1],
"svgContent": [32]
}, undefined, {
"icon": ["loadIcon"],
"src": ["loadIcon"]
}]);
function getSrc(src) {
if (typeof src === 'string') {
src = src.trim();
if (src.length > 0 && /(\/|\.)/.test(src)) {
return src;
}
}
return null;
}
const requests = new Map();
function getSvgContent(url) {
// see if we already have a request for this url
let req = requests.get(url);
if (req === undefined) {
// we don't already have a request
req = fetch(url, { cache: 'force-cache' }).then(rsp => {
if (rsp.ok) {
return rsp.text();
}
return Promise.resolve(null);
});
// cache for the same requests
requests.set(url, req);
}
return req;
}
function validateContent(document, svgContent, scopeId) {
if (!isEmpty(svgContent)) {
const frag = document.createDocumentFragment();
const div = document.createElement('div');
div.innerHTML = svgContent;
frag.appendChild(div);
// setup this way to ensure it works on our buddy IE
for (let i = div.childNodes.length - 1; i >= 0; i--) {
if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
div.removeChild(div.childNodes[i]);
}
}
// must only have 1 root element
const svgElm = div.firstElementChild;
if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
if (!isEmpty(scopeId)) {
svgElm.setAttribute('class', scopeId);
}
// root element must be an svg
// lets double check we've got valid elements
// do not allow scripts
if (isValid(svgElm)) {
return div.innerHTML;
}
}
}
return '';
}
function isValid(elm) {
if (elm.nodeType === 1) {
if (elm.nodeName.toLowerCase() === 'script') {
return false;
}
for (let i = 0; i < elm.attributes.length; i++) {
const val = elm.attributes[i].value;
if (typeof val === 'string' && val.toLowerCase().indexOf('on') === 0) {
return false;
}
}
for (let i = 0; i < elm.childNodes.length; i++) {
if (!isValid(elm.childNodes[i])) {
return false;
}
}
}
return true;
}
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lar-icon"];
components.forEach(tagName => { switch (tagName) {
case "lar-icon":
if (!customElements.get(tagName)) {
customElements.define(tagName, Icon);
}
break;
} });
}
defineCustomElement();
export { Icon as I, defineCustomElement as d };
//# sourceMappingURL=p-C9VBtzS4.js.map
//# sourceMappingURL=p-C9VBtzS4.js.map