@ui5/webcomponents-base 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/src/InitialConfiguration.js

@@ -1,166 +0,0 @@
-import merge from "./thirdparty/merge.js";
-import { getFeature } from "./FeaturesRegistry.js";
-import { DEFAULT_THEME } from "./generated/AssetParameters.js";
-
-let initialized = false;
-
-let initialConfig = {
-	animationMode: "full",
-	theme: DEFAULT_THEME,
-	rtl: null,
-	language: null,
-	calendarType: null,
-	noConflict: false, // no URL
-	formatSettings: {},
-	fetchDefaultLanguage: false,
-};
-
-/* General settings */
-const getAnimationMode = () => {
-	initConfiguration();
-	return initialConfig.animationMode;
-};
-
-const getTheme = () => {
-	initConfiguration();
-	return initialConfig.theme;
-};
-
-const getRTL = () => {
-	initConfiguration();
-	return initialConfig.rtl;
-};
-
-const getLanguage = () => {
-	initConfiguration();
-	return initialConfig.language;
-};
-
-/**
- * Returns if the default language, that is inlined at build time,
- * should be fetched over the network instead.
- * @returns {Boolean}
- */
-const getFetchDefaultLanguage = () => {
-	initConfiguration();
-	return initialConfig.fetchDefaultLanguage;
-};
-
-const getNoConflict = () => {
-	initConfiguration();
-	return initialConfig.noConflict;
-};
-
-const getCalendarType = () => {
-	initConfiguration();
-	return initialConfig.calendarType;
-};
-
-const getFormatSettings = () => {
-	initConfiguration();
-	return initialConfig.formatSettings;
-};
-
-const booleanMapping = new Map();
-booleanMapping.set("true", true);
-booleanMapping.set("false", false);
-
-const parseConfigurationScript = () => {
-	const configScript = document.querySelector("[data-ui5-config]") || document.querySelector("[data-id='sap-ui-config']"); // for backward compatibility
-
-	let configJSON;
-
-	if (configScript) {
-		try {
-			configJSON = JSON.parse(configScript.innerHTML);
-		} catch (err) {
-			console.warn("Incorrect data-sap-ui-config format. Please use JSON"); /* eslint-disable-line */
-		}
-
-		if (configJSON) {
-			initialConfig = merge(initialConfig, configJSON);
-		}
-	}
-};
-
-const parseURLParameters = () => {
-	const params = new URLSearchParams(window.location.search);
-
-	// Process "sap-*" params first
-	params.forEach((value, key) => {
-		const parts = key.split("sap-").length;
-		if (parts === 0 || parts === key.split("sap-ui-").length) {
-			return;
-		}
-
-		applyURLParam(key, value, "sap");
-	});
-
-	// Process "sap-ui-*" params
-	params.forEach((value, key) => {
-		if (!key.startsWith("sap-ui")) {
-			return;
-		}
-
-		applyURLParam(key, value, "sap-ui");
-	});
-};
-
-const normalizeParamValue = (param, value) => {
-	if (param === "theme" && value.includes("@")) { // the theme parameter might have @<URL-TO-THEME> in the value - strip this
-		return value.split("@")[0];
-	}
-
-	return value;
-};
-
-const applyURLParam = (key, value, paramType) => {
-	const lowerCaseValue = value.toLowerCase();
-	const param = key.split(`${paramType}-`)[1];
-
-	if (booleanMapping.has(value)) {
-		value = booleanMapping.get(lowerCaseValue);
-	}
-
-	value = normalizeParamValue(param, value);
-
-	initialConfig[param] = value;
-};
-
-const applyOpenUI5Configuration = () => {
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {
-		return;
-	}
-
-	const OpenUI5Config = OpenUI5Support.getConfigurationSettingsObject();
-	initialConfig = merge(initialConfig, OpenUI5Config);
-};
-
-const initConfiguration = () => {
-	if (initialized) {
-		return;
-	}
-
-	// 1. Lowest priority - configuration script
-	parseConfigurationScript();
-
-	// 2. URL parameters overwrite configuration script parameters
-	parseURLParameters();
-
-	// 3. If OpenUI5 is detected, it has the highest priority
-	applyOpenUI5Configuration();
-
-	initialized = true;
-};
-
-export {
-	getAnimationMode,
-	getTheme,
-	getRTL,
-	getLanguage,
-	getFetchDefaultLanguage,
-	getNoConflict,
-	getCalendarType,
-	getFormatSettings,
-};

package/src/Keys.js

@@ -1,280 +0,0 @@
-const KeyCodes = {
-	BACKSPACE: 8,
-	TAB: 9,
-	ENTER: 13,
-	SHIFT: 16,
-	CONTROL: 17,
-	ALT: 18,
-	BREAK: 19,
-	CAPS_LOCK: 20,
-	ESCAPE: 27,
-	SPACE: 32,
-	PAGE_UP: 33,
-	PAGE_DOWN: 34,
-	END: 35,
-	HOME: 36,
-	ARROW_LEFT: 37,
-	ARROW_UP: 38,
-	ARROW_RIGHT: 39,
-	ARROW_DOWN: 40,
-	PRINT: 44,
-	INSERT: 45,
-	DELETE: 46,
-	DIGIT_0: 48,
-	DIGIT_1: 49,
-	DIGIT_2: 50,
-	DIGIT_3: 51,
-	DIGIT_4: 52,
-	DIGIT_5: 53,
-	DIGIT_6: 54,
-	DIGIT_7: 55,
-	DIGIT_8: 56,
-	DIGIT_9: 57,
-	A: 65,
-	B: 66,
-	C: 67,
-	D: 68,
-	E: 69,
-	F: 70,
-	G: 71,
-	H: 72,
-	I: 73,
-	J: 74,
-	K: 75,
-	L: 76,
-	M: 77,
-	N: 78,
-	O: 79,
-	P: 80,
-	Q: 81,
-	R: 82,
-	S: 83,
-	T: 84,
-	U: 85,
-	V: 86,
-	W: 87,
-	X: 88,
-	Y: 89,
-	Z: 90,
-	WINDOWS: 91,
-	CONTEXT_MENU: 93,
-	TURN_OFF: 94,
-	SLEEP: 95,
-	NUMPAD_0: 96,
-	NUMPAD_1: 97,
-	NUMPAD_2: 98,
-	NUMPAD_3: 99,
-	NUMPAD_4: 100,
-	NUMPAD_5: 101,
-	NUMPAD_6: 102,
-	NUMPAD_7: 103,
-	NUMPAD_8: 104,
-	NUMPAD_9: 105,
-	NUMPAD_ASTERISK: 106,
-	NUMPAD_PLUS: 107,
-	NUMPAD_MINUS: 109,
-	NUMPAD_COMMA: 110,
-	NUMPAD_SLASH: 111,
-	F1: 112,
-	F2: 113,
-	F3: 114,
-	F4: 115,
-	F5: 116,
-	F6: 117,
-	F7: 118,
-	F8: 119,
-	F9: 120,
-	F10: 121,
-	F11: 122,
-	F12: 123,
-	NUM_LOCK: 144,
-	SCROLL_LOCK: 145,
-	OPEN_BRACKET: 186,
-	PLUS: 187,
-	COMMA: 188,
-	SLASH: 189,
-	DOT: 190,
-	PIPE: 191,
-	SEMICOLON: 192,
-	MINUS: 219,
-	GREAT_ACCENT: 220,
-	EQUALS: 221,
-	SINGLE_QUOTE: 222,
-	BACKSLASH: 226,
-};
-
-const isEnter = event => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && !hasModifierKeys(event);
-
-const isEnterShift = event => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && checkModifierKeys(event, false, false, true);
-
-const isSpace = event => (event.key ? (event.key === "Spacebar" || event.key === " ") : event.keyCode === KeyCodes.SPACE) && !hasModifierKeys(event);
-
-const isSpaceShift = event => (event.key ? (event.key === "Spacebar" || event.key === " ") : event.keyCode === KeyCodes.SPACE) && checkModifierKeys(event, false, false, true);
-
-const isLeft = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && !hasModifierKeys(event);
-
-const isRight = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && !hasModifierKeys(event);
-
-const isUp = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && !hasModifierKeys(event);
-
-const isDown = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && !hasModifierKeys(event);
-
-const isLeftCtrl = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, true, false, false);
-
-const isRightCtrl = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, true, false, false);
-
-const isUpCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, false);
-
-const isDownCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, false);
-
-const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, false, true);
-
-const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
-
-const isUpAlt = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, true, false);
-
-const isDownAlt = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, true, false);
-
-const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
-
-const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
-
-const isLeftShiftCtrl = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, true, false, true);
-
-const isRightShiftCtrl = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, true, false, true);
-
-const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
-
-const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
-
-const isHome = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && !hasModifierKeys(event);
-
-const isEnd = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && !hasModifierKeys(event);
-
-const isHomeCtrl = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, true, false, false);
-
-const isHomeShift = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, false, false, true);
-
-const isEndCtrl = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, true, false, false);
-
-const isEndShift = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, false, false, true);
-
-const isEscape = event => (event.key ? event.key === "Escape" || event.key === "Esc" : event.keyCode === KeyCodes.ESCAPE) && !hasModifierKeys(event);
-
-const isTabNext = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && !hasModifierKeys(event);
-
-const isTabPrevious = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ false, /* Shift */ true);
-
-const isBackSpace = event => (event.key ? event.key === "Backspace" : event.keyCode === KeyCodes.BACKSPACE) && !hasModifierKeys(event);
-
-const isDelete = event => (event.key ? event.key === "Delete" : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event);
-
-const isPageUp = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && !hasModifierKeys(event);
-
-const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && !hasModifierKeys(event);
-
-const isPageUpShift = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, false, true);
-
-const isPageUpAlt = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, true, false);
-
-const isPageDownShift = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, false, true);
-
-const isPageDownAlt = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, true, false);
-
-const isPageUpShiftCtrl = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, true, false, true);
-
-const isPageDownShiftCtrl = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, true, false, true);
-
-const isPlus = event => (event.key ? event.key === "+" : event.keyCode === KeyCodes.PLUS) || (event.keyCode === KeyCodes.NUMPAD_PLUS && !hasModifierKeys(event));
-
-const isMinus = event => (event.key ? event.key === "-" : event.keyCode === KeyCodes.MINUS) || (event.keyCode === KeyCodes.NUMPAD_MINUS && !hasModifierKeys(event));
-
-const isShow = event => {
-	if (event.key) {
-		return isF4(event) || isShowByArrows(event);
-	}
-
-	return (event.keyCode === KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode === KeyCodes.ARROW_DOWN && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
-};
-
-const isF4 = event => {
-	return event.key === "F4" && !hasModifierKeys(event);
-};
-
-const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
-
-const isF6Next = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, false))
-|| ((event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, true, false));
-
-const isF6Previous = event => ((event.key ? event.key === "F6" : event.keyCode === KeyCodes.F6) && checkModifierKeys(event, false, false, true))
-|| ((event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_Up) && checkModifierKeys(event, true, true, false));
-
-const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
-
-const isShowByArrows = event => {
-	return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false);
-};
-
-const isShift = event => event.key === "Shift" || event.keyCode === KeyCodes.SHIFT;
-
-const isCtrlA = event => ((event.key === "A" || event.key === "a") || event.which === KeyCodes.A) && checkModifierKeys(event, true, false, false);
-
-const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event);
-
-const getCtrlKey = event => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
-
-const checkModifierKeys = (event, bCtrlKey, bAltKey, bShiftKey) => event.shiftKey === bShiftKey && event.altKey === bAltKey && getCtrlKey(event) === bCtrlKey;
-
-export {
-	isEnter,
-	isEnterShift,
-	isSpace,
-	isSpaceShift,
-	isLeft,
-	isRight,
-	isUp,
-	isDown,
-	isLeftCtrl,
-	isRightCtrl,
-	isUpCtrl,
-	isDownCtrl,
-	isUpShift,
-	isDownShift,
-	isUpAlt,
-	isDownAlt,
-	isLeftShift,
-	isRightShift,
-	isLeftShiftCtrl,
-	isRightShiftCtrl,
-	isUpShiftCtrl,
-	isDownShiftCtrl,
-	isHome,
-	isEnd,
-	isPlus,
-	isMinus,
-	isHomeCtrl,
-	isEndCtrl,
-	isHomeShift,
-	isEndShift,
-	isEscape,
-	isTabNext,
-	isTabPrevious,
-	isBackSpace,
-	isDelete,
-	isShow,
-	isF4,
-	isF4Shift,
-	isF6Previous,
-	isF6Next,
-	isF7,
-	isPageUp,
-	isPageDown,
-	isPageUpShift,
-	isPageUpAlt,
-	isPageDownShift,
-	isPageDownAlt,
-	isPageUpShiftCtrl,
-	isPageDownShiftCtrl,
-	isShift,
-	isCtrlA,
-};

package/src/ManagedStyles.js

@@ -1,83 +0,0 @@
-import createStyleInHead from "./util/createStyleInHead.js";
-import createLinkInHead from "./util/createLinkInHead.js";
-import { shouldUseLinks, getUrl } from "./CSP.js";
-
-const getStyleId = (name, value) => {
-	return value ? `${name}|${value}` : name;
-};
-
-const createStyle = (data, name, value = "") => {
-	const content = typeof data === "string" ? data : data.content;
-
-	if (shouldUseLinks()) {
-		const attributes = {};
-		attributes[name] = value;
-		const href = getUrl(data.packageName, data.fileName);
-		createLinkInHead(href, attributes);
-	} else if (document.adoptedStyleSheets) {
-		const stylesheet = new CSSStyleSheet();
-		stylesheet.replaceSync(content);
-		stylesheet._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later
-		document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
-	} else {
-		const attributes = {};
-		attributes[name] = value;
-		createStyleInHead(content, attributes);
-	}
-};
-
-const updateStyle = (data, name, value = "") => {
-	const content = typeof data === "string" ? data : data.content;
-
-	if (shouldUseLinks()) {
-		document.querySelector(`head>link[${name}="${value}"]`).href = getUrl(data.packageName, data.fileName);
-	} else if (document.adoptedStyleSheets) {
-		document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value)).replaceSync(content || "");
-	} else {
-		document.querySelector(`head>style[${name}="${value}"]`).textContent = content || "";
-	}
-};
-
-const hasStyle = (name, value = "") => {
-	if (shouldUseLinks()) {
-		return !!document.querySelector(`head>link[${name}="${value}"]`);
-	}
-
-	if (document.adoptedStyleSheets) {
-		return !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
-	}
-
-	return !!document.querySelector(`head>style[${name}="${value}"]`);
-};
-
-const removeStyle = (name, value = "") => {
-	if (shouldUseLinks()) {
-		const linkElement = document.querySelector(`head>link[${name}="${value}"]`);
-		if (linkElement) {
-			linkElement.parentElement.removeChild(linkElement);
-		}
-	} else if (document.adoptedStyleSheets) {
-		document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
-	} else {
-		const styleElement = document.querySelector(`head > style[${name}="${value}"]`);
-		if (styleElement) {
-			styleElement.parentElement.removeChild(styleElement);
-		}
-	}
-};
-
-const createOrUpdateStyle = (data, name, value = "") => {
-	if (hasStyle(name, value)) {
-		updateStyle(data, name, value);
-	} else {
-		createStyle(data, name, value);
-	}
-};
-
-export {
-	createStyle,
-	hasStyle,
-	updateStyle,
-	removeStyle,
-	createOrUpdateStyle,
-};

package/src/MediaRange.js

@@ -1,109 +0,0 @@
-const querySets = {};
-
-/**
- * Initializes a screen width media query range set.
- *
- * This initialization step makes the range set ready to be used for one of the other functions in namespace <code>MediaRange</code>.
- *
- * A range set can be defined as shown in the following example:
- * <pre>
- * MediaRange.initRangeSet("MyRangeSet", [200, 400], ["Small", "Medium", "Large"]);
- * </pre>
- * This example defines the following named ranges:
- * <ul>
- * <li><code>"Small"</code>: For screens smaller than 200 pixels.</li>
- * <li><code>"Medium"</code>: For screens greater than or equal to 200 pixels and smaller than 400 pixels.</li>
- * <li><code>"Large"</code>: For screens greater than or equal to 400 pixels.</li>
- * </ul>
- *
- * @param {string} name The name of the range set to be initialized.
- * The name must be a valid id and consist only of letters and numeric digits.
- *
- * @param {int[]} [borders] The range borders
- *
- * @param {string[]} [names] The names of the ranges. The names must be a valid id and consist only of letters and digits.
- *
- * @name MediaRange.initRangeSet
- * @function
- * @public
- */
-const _initRangeSet = (name, borders, names) => {
-	querySets[name] = {
-		borders,
-		names,
-	};
-};
-
-/**
- * Returns information about the current active range of the range set with the given name.
- *
- * If the optional parameter <code>width</code> is given, the active range will be determined for that width,
- * otherwise it is determined for the current window size.
- *
- * @param {string} name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet})
- * @param {int} [width] An optional width, based on which the range should be determined;
- *             If <code>width</code> is not provided, the window size will be used.
- * @returns {string} The name of the current active interval of the range set.
- *
- * @name MediaRange.getCurrentRange
- * @function
- * @public
- */
-const _getCurrentRange = (name, width = window.innerWidth) => {
-	const querySet = querySets[name];
-	let i = 0;
-
-	if (!querySet) {
-		return null;
-	}
-
-	for (; i < querySet.borders.length; i++) {
-		if (width < querySet.borders[i]) {
-			return querySet.names[i];
-		}
-	}
-
-	return querySet.names[i];
-};
-
-/**
- * Enumeration containing the names and settings of predefined screen width media query range sets.
- *
- * @namespace
- * @name MediaRange.RANGESETS
- * @public
- */
-const RANGESETS = {
-	/**
-	 * A 4-step range set (S-M-L-XL).
-	 *
-	 * The ranges of this set are:
-	 * <ul>
-	 * <li><code>"S"</code>: For screens smaller than 600 pixels.</li>
-	 * <li><code>"M"</code>: For screens greater than or equal to 600 pixels and smaller than 1024 pixels.</li>
-	 * <li><code>"L"</code>: For screens greater than or equal to 1024 pixels and smaller than 1440 pixels.</li>
-	 * <li><code>"XL"</code>: For screens greater than or equal to 1440 pixels.</li>
-	 * </ul>
-	 *
-	 * @name MediaRange.RANGESETS.RANGE_4STEPS
-	 * @public
-	 */
-	RANGE_4STEPS: "4Step",
-};
-
-/**
- * API for screen width changes.
- *
- * @namespace
- * @name MediaRange
- */
-
-const MediaRange = {
-	RANGESETS,
-	initRangeSet: _initRangeSet,
-	getCurrentRange: _getCurrentRange,
-};
-
-MediaRange.initRangeSet(MediaRange.RANGESETS.RANGE_4STEPS, [600, 1024, 1440], ["S", "M", "L", "XL"]);
-
-export default MediaRange;