How to use @ui5/webcomponents-core - 10 common examples

const getIconInfo = iconURI => {
	if (!isIconURI(iconURI)) {
		console.warn(`Invalid icon URI ${iconURI}`); /* eslint-disable-line */
		return;
	}

	let iconName = URI.parse(iconURI).hostname;

	/* when "sap-icon://" is skipped, but icon is valid */
	if (iconURI.indexOf("sap-icon://") === -1) {
		iconName = URI.parse(iconURI).protocol;
	}

	return {
		fontFamily: SAP_ICON_FONT_FAMILY,
		uri: getIconURI(iconName),
		content: `${stringFromCharCode(iconMapping[iconName])}`,
	};
};

const getIconInfo = iconURI => {
	if (!isIconURI(iconURI)) {
		console.warn(`Invalid icon URI ${iconURI}`); /* eslint-disable-line */
		return;
	}

	let iconName = URI.parse(iconURI).hostname;

	/* when "sap-icon://" is skipped, but icon is valid */
	if (iconURI.indexOf("sap-icon://") === -1) {
		iconName = URI.parse(iconURI).protocol;
	}

	return {
		fontFamily: SAP_ICON_FONT_FAMILY,
		uri: getIconURI(iconName),
		content: `${stringFromCharCode(iconMapping[iconName])}`,
	};
};

static calculate(state) {
		const mainClasses = InputTemplateContext.getMainClasses(state);
		const wrapperClasses = InputTemplateContext.getWrapperClasses(state);

		// We don`t support placeholder for IE,
		// because IE fires input events, when placeholder exists, leading to functional degredations.
		if (isIE()) {
			state.placeholder = "";
		}

		const context = {
			ctr: state,
			_readonly: state.readonly && !state.disabled,
			classes: { main: mainClasses, wrapper: wrapperClasses },
			styles: {
				main: { width: "100%" },
			},
			type: state.type.toLowerCase(),
			ariaInvalid: state.valueState === "Error" ? "true" : undefined,
		};

		return context;
	}

static getMainClasses(state) {
		return {
			sapMLIBBorder: !state._hideBorder,
			sapMLIB: true,
			"sapMLIB-CTX": true,
			sapMLIBShowSeparator: true,
			sapMLIBFocusable: isDesktop(),
		};
	}

static getNoDataClasses() {
		return {
			sapMLIB: true,
			sapMListNoData: true,
			sapMLIBTypeInactive: true,
			sapMLIBFocusable: isDesktop(),
		};
	}
}

static getMainClasses(state) {
		const hoverable = !state.disabled && !state.readonly && isDesktop();

		return {
			"ui5-checkbox-wrapper": true,
			"ui5-checkbox-with-label": !!state.text,
			"ui5-checkbox--disabled": state.disabled,
			"ui5-checkbox--readonly": state.readonly,
			"ui5-checkbox--error": state.valueState === "Error",
			"ui5-checkbox--warning": state.valueState === "Warning",
			"ui5-checkbox--wrap": state.wrap,
			"ui5-checkbox--hoverable": hoverable,
		};
	}

static getMainClasses(state) {
		const graphical = state.type === SwitchType.Graphical;
		const hasLabel = graphical || state.textOn || state.textOff;

		return {
			"ui5-switch-wrapper": true,
			"ui5-switch-desktop": isDesktop(),
			"ui5-switch--disabled": state.disabled,
			"ui5-switch--checked": state.checked,
			"ui5-switch--semantic": graphical,
			"ui5-switch--no-label": !hasLabel,
		};
	}
}

static getMainClasses(state) {
		const desktop = isDesktop();
		const isActionable = (state.type === ListItemType.Active) && (state._mode !== ListMode.Delete);
		const context = ListItemBaseTemplateContext.getMainClasses(state);

		context[`sapMLIBType${state.type}`] = true;
		context.sapMSLI = true;
		context.sapMLIBActionable = desktop && isActionable;
		context.sapMLIBHoverable = desktop && isActionable;
		context.sapMLIBSelected = state.selected;
		context.sapMLIBActive = state._active;

		return context;
	}

static getInnerClasses(state) {
		const hoverable = !state.disabled && !state.readonly && isDesktop();

		return {
			sapMRbInner: true,
			sapMRbHoverable: hoverable,
		};
	}
}

const setupBrowser = node => {
	const b = getBrowser();
	let id = b.name;

	if (id) {
		if (id === b.BROWSER.SAFARI && b.mobile) {
			id = `m${id}`;
		}
		id += (b.version === -1 ? "" : Math.floor(b.version));
		node.dataset.sapUiBrowser = id;
	}
};