@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
269 lines (259 loc) • 10.5 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
'use strict';
var index = require('./index-B0SElCD3.js');
var theme = require('./theme-3s-LQhJl.js');
var _getTag = require('./_getTag-BnylOe-u.js');
var isLength = require('./isLength-CPPfDVFI.js');
var isArray = require('./isArray-D5T3FFPp.js');
var utils = require('./utils-DQcGDvpY.js');
var i18n = require('./i18n-BzaE5hu-.js');
require('./isObjectLike-DYIul5Fz.js');
require('./global-C03WvntH.js');
require('./isObject-BbrqXeY4.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 (_getTag.isArrayLike(value) &&
(isArray.isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
_getTag.isBuffer(value) || _getTag.isTypedArray(value) || isLength.isArguments(value))) {
return !value.length;
}
var tag = _getTag.getTag(value);
if (tag == mapTag || tag == setTag) {
return !value.size;
}
if (_getTag.isPrototype(value)) {
return !_getTag.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) {
index.registerInstance(this, hostRef);
}
loadIcon() {
// Check if it's a named icon (from built-in icons)
if (!isEmpty(this.icon)) {
const svgContent = utils.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 = index.h("div", { key: '525d0b09cd5a3dad9719ec9590598b3ac139c81a', class: "lar-icon-inner" }, index.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 = index.h("div", { key: '7b954444ae93d046aaa002e90d148325f7ee6f59', class: "lar-icon-inner" });
}
return (index.h(index.Host, { key: 'bc2ba9cd78548ef518300cf2d201897330862770', role: "img", class: Object.assign(Object.assign({}, theme.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 index.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) {
index.registerInstance(this, hostRef);
this.larlangchange = index.createEvent(this, "larlangchange");
this.i18n = 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 index.getElement(this); }
static get watchers() { return {
"t": ["changeHandler"]
}; }
};
exports.lar_icon = Icon;
exports.lar_translate = LarvaTranslate;
//# sourceMappingURL=lar-icon.lar-translate.entry.cjs.js.map