@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
266 lines (257 loc) • 10.5 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-C4h1muVj.js';
import { c as createColorClasses } from './theme-B02IfvGX.js';
import { i as isArrayLike, a as isBuffer, c as isTypedArray, g as getTag, e as isPrototype, d as baseKeys } from './_getTag-CFse-dEC.js';
import { i as isArguments } from './isLength-BBM_tGdM.js';
import { i as isArray } from './isArray-C_HhfJYh.js';
import { b as getIconMap } from './utils-PgdWkWmb.js';
import { i as i18n } from './i18n-Cga1x4Z-.js';
import './isObjectLike-CIR68wtF.js';
import './global-C56buD75.js';
import './isObject-C7eoH3L1.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
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 getElement(this); }
static get watchers() { return {
"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;
}
Icon.style = iconCss;
const LarvaTranslate = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.larlangchange = createEvent(this, "larlangchange");
this.i18n = i18n;
// input text
this.t = '';
// translated (text
this.tt = '';
}
changeHandler() {
try {
const exists = this.i18n.exists(this.t, { lng: this.i18n.language });
const fallback = this.fallback ? this.fallback : this.t;
this.tt = exists ? this.i18n.t(this.t, { lng: this.i18n.language }) : fallback;
}
catch (err) {
console.error(this.t);
console.error(err);
}
}
componentWillLoad() {
this.changeHandler();
this.bindedListener = () => {
this.larlangchange.emit();
this.changeHandler();
};
this.i18n.on('languageChanged', this.bindedListener);
this.i18n.on('languagechanged', this.bindedListener);
}
disconnectedCallback() {
try {
this.i18n.off('languageChanged', this.bindedListener);
this.i18n.off('languagechanged', this.bindedListener);
}
catch (err) {
console.error(err);
}
}
fillTranslationValues(translation = '', values) {
if (!values) {
return translation;
}
return translation.replace(/{\w+}/g, (key) => {
const parsedKey = key.substring(1, key.length - 1);
return (values[parsedKey] || 'undefined').toString();
});
}
render() {
return this.fillTranslationValues(this.tt, this.values);
}
get el() { return getElement(this); }
static get watchers() { return {
"t": ["changeHandler"]
}; }
};
export { Icon as lar_icon, LarvaTranslate as lar_translate };
//# sourceMappingURL=lar-icon.lar-translate.entry.js.map