@ui5/webcomponents-base 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/src/MediaRange.ts

@@ -1,8 +1,36 @@
-const querySets = new Map<string, RangeSet>();
+type Range = Map<string, Array<number>>;
 
-type RangeSet = {
-	borders: Array<number>,
-	names: Array<string>,
+const mediaRanges = new Map<string, Range>();
+
+const DEAFULT_RANGE_SET: Range = new Map<string, Array<number>>();
+DEAFULT_RANGE_SET.set("S", [0, 599]);
+DEAFULT_RANGE_SET.set("M", [600, 1023]);
+DEAFULT_RANGE_SET.set("L", [1024, 1439]);
+DEAFULT_RANGE_SET.set("XL", [1440, Infinity]);
+
+/**
+ * Enumeration containing the names and settings of predefined screen width media query range sets.
+ *
+ * @namespace
+ * @name MediaRange.RANGESETS
+ * @public
+ */
+ enum 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",
 }
 
 /**
@@ -23,15 +51,11 @@ type RangeSet = {
  *
  * @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.
+ * @param {Range} [range] The given range set.
  * @name MediaRange.initRangeSet
  */
-const _initRangeSet = (name: string, borders: Array<number>, names: Array<string>) => {
-	querySets.set(name, {
-		borders,
-		names,
-	});
+const initRangeSet = (name: string, range: Range) => {
+	mediaRanges.set(name, range);
 };
 
 /**
@@ -41,56 +65,33 @@ const _initRangeSet = (name: string, borders: Array<number>, names: Array<string
  * 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.
+ * @param {number} [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: string, width = window.innerWidth) => {
-	const querySet = querySets.get(name);
-	let i = 0;
+const getCurrentRange = (name: string, width = window.innerWidth): string => {
+	let rangeSet = mediaRanges.get(name);
 
-	if (!querySet) {
-		return null;
+	if (!rangeSet) {
+		rangeSet = mediaRanges.get(RANGESETS.RANGE_4STEPS)!;
 	}
 
-	for (; i < querySet.borders.length; i++) {
-		if (width < querySet.borders[i]) {
-			return querySet.names[i];
+	let currentRangeName;
+	const effectiveWidth = Math.floor(width);
+
+	rangeSet.forEach((value, key) => {
+		if (effectiveWidth >= value[0] && effectiveWidth <= value[1]) {
+			currentRangeName = key;
 		}
-	}
+	});
 
-	return querySet.names[i];
+	return currentRangeName || [...rangeSet.keys()][0];
 };
 
-/**
- * Enumeration containing the names and settings of predefined screen width media query range sets.
- *
- * @namespace
- * @name MediaRange.RANGESETS
- * @public
- */
-enum 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.
  *
@@ -100,10 +101,10 @@ enum RANGESETS {
 
 const MediaRange = {
 	RANGESETS,
-	initRangeSet: _initRangeSet,
-	getCurrentRange: _getCurrentRange,
+	initRangeSet,
+	getCurrentRange,
 };
 
-MediaRange.initRangeSet(MediaRange.RANGESETS.RANGE_4STEPS, [600, 1024, 1440], ["S", "M", "L", "XL"]);
+MediaRange.initRangeSet(MediaRange.RANGESETS.RANGE_4STEPS, DEAFULT_RANGE_SET);
 
 export default MediaRange;

package/src/UI5Element.ts

@@ -24,7 +24,7 @@ import arraysAreEqual from "./util/arraysAreEqual.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
 import preloadLinks from "./theming/preloadLinks.js";
 import { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js";
-import { PromiseResolve, StyleData } from "./types.js";
+import { PromiseResolve, ComponentStylesData, ClassMap } from "./types.js";
 
 let autoId = 0;
 
@@ -75,7 +75,7 @@ let metadata = {} as Metadata;
  * @class
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.base.UI5Element
  * @extends HTMLElement
  * @public
  */
@@ -291,8 +291,11 @@ abstract class UI5Element extends HTMLElement {
 
 			// Check if the slotName is supported
 			if (slotData === undefined) {
-				const validValues = Object.keys(slotsMap).join(", ");
-				console.warn(`Unknown slotName: ${slotName}, ignoring`, child, `Valid values are: ${validValues}`); // eslint-disable-line
+				if (slotName !== "default") {
+					const validValues = Object.keys(slotsMap).join(", ");
+					console.warn(`Unknown slotName: ${slotName}, ignoring`, child, `Valid values are: ${validValues}`); // eslint-disable-line
+				}
+
 				return;
 			}
 
@@ -461,11 +464,18 @@ abstract class UI5Element extends HTMLElement {
 		const realName = name.replace(/^ui5-/, "");
 		const nameInCamelCase = kebabToCamelCase(realName);
 		if (properties.hasOwnProperty(nameInCamelCase)) { // eslint-disable-line
-			const propertyTypeClass = properties[nameInCamelCase].type;
-			if (propertyTypeClass === Boolean) {
+			const propData = properties[nameInCamelCase];
+			const propertyType = propData.type;
+			let propertyValidator = propData.validator as typeof DataType;
+
+			if (propertyType && (propertyType as typeof DataType).isDataTypeClass) {
+				propertyValidator = propertyType as typeof DataType;
+			}
+
+			if (propertyValidator) {
+				newPropertyValue = propertyValidator.attributeToProperty(newValue);
+			} else if (propertyType === Boolean) {
 				newPropertyValue = newValue !== null;
-			} else if ((propertyTypeClass as typeof DataType).isDataTypeClass) {
-				newPropertyValue = (propertyTypeClass as typeof DataType).attributeToProperty(newValue);
 			} else {
 				newPropertyValue = newValue as string;
 			}
@@ -484,18 +494,18 @@ abstract class UI5Element extends HTMLElement {
 			return;
 		}
 		const properties = ctor.getMetadata().getProperties();
-		const propertyTypeClass = properties[name].type;
+		const propData = properties[name];
+		const propertyType = propData.type;
+		let propertyValidator = propData.validator as typeof DataType;
 		const attrName = camelToKebabCase(name);
 		const attrValue = this.getAttribute(attrName);
 
-		if (propertyTypeClass === Boolean) {
-			if (newValue === true && attrValue === null) {
-				this.setAttribute(attrName, "");
-			} else if (newValue === false && attrValue !== null) {
-				this.removeAttribute(attrName);
-			}
-		} else if ((propertyTypeClass as typeof DataType).isDataTypeClass) {
-			const newAttrValue = (propertyTypeClass as typeof DataType).propertyToAttribute(newValue);
+		if (propertyType && (propertyType as typeof DataType).isDataTypeClass) {
+			propertyValidator = propertyType as typeof DataType;
+		}
+
+		if (propertyValidator) {
+			const newAttrValue = propertyValidator.propertyToAttribute(newValue);
 			if (newAttrValue === null) { // null means there must be no attribute for the current value of the property
 				this._doNotSyncAttributes.add(attrName); // skip the attributeChangedCallback call for this attribute
 				this.removeAttribute(attrName); // remove the attribute safely (will not trigger synchronization to the property value due to the above line)
@@ -503,6 +513,12 @@ abstract class UI5Element extends HTMLElement {
 			} else {
 				this.setAttribute(attrName, newAttrValue);
 			}
+		} else if (propertyType === Boolean) {
+			if (newValue === true && attrValue === null) {
+				this.setAttribute(attrName, "");
+			} else if (newValue === false && attrValue !== null) {
+				this.removeAttribute(attrName);
+			}
 		} else if (typeof newValue !== "object") {
 			if (attrValue !== newValue) {
 				this.setAttribute(attrName, newValue as string);
@@ -814,8 +830,8 @@ abstract class UI5Element extends HTMLElement {
 	 * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content.
 	 * @public
 	 */
-	getSlottedNodes(this: Record<string, Array<SlotValue>>, slotName: string) {
-		return getSlottedNodesList(this[slotName]);
+	getSlottedNodes(slotName: string) {
+		return getSlottedNodesList((this as unknown as Record<string, Array<SlotValue>>)[slotName]);
 	}
 
 	/**
@@ -839,6 +855,10 @@ abstract class UI5Element extends HTMLElement {
 		return true;
 	}
 
+	get classes(): ClassMap {
+		return {};
+	}
+
 	/**
 	 * Do not override this method in derivatives of UI5Element, use metadata properties instead
 	 * @private
@@ -935,12 +955,18 @@ abstract class UI5Element extends HTMLElement {
 					const metadataCtor = ctor.getMetadata().constructor as typeof UI5ElementMetadata;
 
 					value = metadataCtor.validatePropertyValue(value, propData);
-					const propertyTypeClass = propData.type;
+					const propertyType = propData.type;
+					let propertyValidator = propData.validator as typeof DataType;
 					const oldState = this._state[prop];
-					if (Array.isArray(oldState) && Array.isArray(value) && propData.multiple && propData.compareValues) { // compareValues is added for IE, test if needed now
+
+					if (propertyType && (propertyType as typeof DataType).isDataTypeClass) {
+						propertyValidator = propertyType as typeof DataType;
+					}
+
+					if (propertyValidator) {
+						isDifferent = !propertyValidator.valuesAreEqual(oldState, value);
+					} else if (Array.isArray(oldState) && Array.isArray(value) && propData.multiple && propData.compareValues) { // compareValues is added for IE, test if needed now
 						isDifferent = !arraysAreEqual(oldState, value);
-					} else if ((propertyTypeClass as typeof DataType).isDataTypeClass) {
-						isDifferent = !(propertyTypeClass as typeof DataType).valuesAreEqual(oldState, value);
 					} else {
 						isDifferent = oldState !== value;
 					}
@@ -1003,7 +1029,7 @@ abstract class UI5Element extends HTMLElement {
 	 * Returns the CSS for this UI5 Web Component Class
 	 * @protected
 	 */
-	static get styles(): Array<StyleData> | StyleData {
+	static get styles(): ComponentStylesData {
 		return "";
 	}
 
@@ -1011,7 +1037,7 @@ abstract class UI5Element extends HTMLElement {
 	 * Returns the Static Area CSS for this UI5 Web Component Class
 	 * @protected
 	 */
-	static get staticAreaStyles(): Array<StyleData> | StyleData {
+	static get staticAreaStyles(): ComponentStylesData {
 		return "";
 	}
 
@@ -1099,17 +1125,21 @@ abstract class UI5Element extends HTMLElement {
 			return this._metadata;
 		}
 
-		const metadataObjects = [this.metadata];
+		const effectiveMetadata = Object.keys(this.metadata).length ? this.metadata : this.decoratorMetadata;
+		const metadataObjects = [effectiveMetadata];
 		let klass = this; // eslint-disable-line
 		while (klass !== UI5Element) {
 			klass = Object.getPrototypeOf(klass);
-			metadataObjects.unshift(klass.metadata);
+			const effectiveKlassMetadata = Object.keys(klass.metadata).length ? klass.metadata : klass.decoratorMetadata;
+			metadataObjects.unshift(effectiveKlassMetadata);
 		}
 		const mergedMetadata = merge({}, ...metadataObjects) as Metadata;
 
 		this._metadata = new UI5ElementMetadata(mergedMetadata);
 		return this._metadata;
 	}
+
+	static decoratorMetadata: Metadata = {};
 }
 
 /**

package/src/UI5ElementMetadata.ts

@@ -10,6 +10,7 @@ type SlotInvalidation = {
 
 type Slot = {
 	type: typeof Node | typeof HTMLElement,
+	default?: boolean,
 	propertyName?: string,
 	individualSlots?: boolean,
 	invalidateOnChildChange?: boolean | SlotInvalidation,
@@ -18,21 +19,24 @@ type Slot = {
 type SlotValue = Node;
 
 type Property = {
-	multiple?: boolean,
-	type: BooleanConstructor | StringConstructor | ObjectConstructor | DataType
+	type?: BooleanConstructor | StringConstructor | ObjectConstructor | DataType
+	validator?: DataType,
 	defaultValue?: PropertyValue,
 	noAttribute?: boolean,
+	multiple?: boolean,
 	compareValues?: boolean,
 }
 
 type PropertyValue = boolean | number | string | object | undefined | null | DataType;
 
+type EventData = Record<string, object>;
+
 type Metadata = {
-	tag: string,
+	tag?: string,
 	managedSlots?: boolean,
 	properties?: Record<string, Property>,
 	slots?: Record<string, Slot>,
-	events?: Record<string, object>,
+	events?: EventData,
 	fastNavigation?: boolean,
 	themeAware?: boolean,
 	languageAware?: boolean,
@@ -104,8 +108,8 @@ class UI5ElementMetadata {
 	 */
 	static validatePropertyValue(value: PropertyValue, propData: Property) {
 		const isMultiple = propData.multiple;
-		if (isMultiple && Array.isArray(value)) {
-			return value.map((propValue: PropertyValue) => validateSingleProperty(propValue, propData));
+		if (isMultiple && value) {
+			return (value as Array<PropertyValue>).map((propValue: PropertyValue) => validateSingleProperty(propValue, propData));
 		}
 		return validateSingleProperty(value, propData);
 	}
@@ -125,7 +129,7 @@ class UI5ElementMetadata {
 	 * @public
 	 */
 	getPureTag() {
-		return this.metadata.tag;
+		return this.metadata.tag || "";
 	}
 
 	/**
@@ -134,6 +138,11 @@ class UI5ElementMetadata {
 	 */
 	getTag() {
 		const pureTag = this.metadata.tag;
+
+		if (!pureTag) {
+			return "";
+		}
+
 		const suffix = getEffectiveScopingSuffixForTag(pureTag);
 		if (!suffix) {
 			return pureTag;
@@ -171,14 +180,6 @@ class UI5ElementMetadata {
 		return this.getPropertiesList().filter(this.hasAttribute.bind(this)).map(camelToKebabCase);
 	}
 
-	/**
-	 * Returns an object with key-value pairs of slots and their metadata definitions
-	 * @public
-	 */
-	getSlots() {
-		return this.metadata.slots || {};
-	}
-
 	/**
 	 * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
 	 * @returns {boolean}
@@ -225,7 +226,10 @@ class UI5ElementMetadata {
 	 * @public
 	 */
 	getProperties() {
-		return this.metadata.properties || {};
+		if (!this.metadata.properties) {
+			this.metadata.properties = {};
+		}
+		return this.metadata.properties;
 	}
 
 	/**
@@ -233,7 +237,21 @@ class UI5ElementMetadata {
 	 * @public
 	 */
 	getEvents() {
-		return this.metadata.events || {};
+		if (!this.metadata.events) {
+			this.metadata.events = {};
+		}
+		return this.metadata.events;
+	}
+
+	/**
+	 * Returns an object with key-value pairs of slots and their metadata definitions
+	 * @public
+	 */
+	 getSlots() {
+		if (!this.metadata.slots) {
+			this.metadata.slots = {};
+		}
+		return this.metadata.slots;
 	}
 
 	/**
@@ -323,23 +341,29 @@ class UI5ElementMetadata {
 
 const validateSingleProperty = (value: PropertyValue, propData: Property) => {
 	const propertyType = propData.type;
+	let propertyValidator = propData.validator;
 
-	if (propertyType === Boolean) {
-		return typeof value === "boolean" ? value : false;
+	if (propertyType && (propertyType as typeof DataType).isDataTypeClass) {
+		propertyValidator = propertyType as typeof DataType;
 	}
 
-	if (propertyType === String) {
+	if (propertyValidator) {
+		return (propertyValidator as typeof DataType).isValid(value) ? value : propData.defaultValue;
+	}
+
+	if (!propertyType || propertyType === String) {
 		return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
 	}
 
-	if (propertyType === Object) {
-		return typeof value === "object" ? value : propData.defaultValue;
+	if (propertyType === Boolean) {
+		return typeof value === "boolean" ? value : false;
 	}
 
-	if ((propertyType as typeof DataType).isDataTypeClass) {
-		return (propertyType as typeof DataType).isValid(value) ? value : propData.defaultValue;
+	if (propertyType === Object) {
+		return typeof value === "object" ? value : propData.defaultValue;
 	}
 
+	// Check if "value" is part of the enum (propertyType) values and return the defaultValue if not found.
 	return value as string in propertyType ? value : propData.defaultValue;
 };
 
@@ -359,6 +383,7 @@ export type {
 	PropertyValue,
 	Slot,
 	SlotValue,
+	EventData,
 	State,
 	Metadata,
 };

package/src/asset-registries/Icons.ts

@@ -158,4 +158,5 @@ export {
 
 export type {
 	IconData,
+	CollectionData,
 };

package/src/asset-registries/Illustrations.ts

@@ -1,4 +1,5 @@
 import getSharedResource from "../getSharedResource.js";
+import { I18nText } from "../i18nBundle.js";
 
 type IllustrationLoader = (illustrationName: string) => Promise<IllustrationData>;
 
@@ -6,8 +7,8 @@ type IllustrationProperties = {
 	dialogSvg: string,
 	sceneSvg: string,
 	spotSvg: string,
-	title: string,
-	subtitle: string,
+	title: I18nText,
+	subtitle: I18nText,
 };
 
 type IllustrationData = IllustrationProperties & {
@@ -17,7 +18,6 @@ type IllustrationData = IllustrationProperties & {
 const loaders = new Map<string, IllustrationLoader>();
 const registry = getSharedResource<Map<string, IllustrationProperties>>("SVGIllustration.registry", new Map());
 const illustrationPromises = getSharedResource<Map<string, Promise<IllustrationData>>>("SVGIllustration.promises", new Map());
-const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
 
 const registerIllustration = (name: string, data: IllustrationData) => {
 	registry.set(`${data.set}/${name}`, {
@@ -36,8 +36,10 @@ const registerIllustrationLoader = (illustrationName: string, loader: Illustrati
 const _loadIllustrationOnce = async (illustrationName: string) => {
 	if (!illustrationPromises.has(illustrationName)) {
 		if (!loaders.has(illustrationName)) {
-			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module.`);
+			const illustrationPath = illustrationName.startsWith("Tnt") ? `tnt/${illustrationName.replace(/^Tnt/, "")}` : illustrationName;
+			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js" module. Or you can import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module that will make all illustrations available, but fetch only the ones used.`);
 		}
+
 		const loadIllustrations = loaders.get(illustrationName)!;
 		illustrationPromises.set(illustrationName, loadIllustrations(illustrationName));
 	}
@@ -62,7 +64,7 @@ const getIllustrationData = async (illustrationName: string) => {
 		set = "tnt";
 		illustrationName = illustrationName.replace(/^Tnt/, "");
 	}
-	return registry.get(`${set}/${illustrationName}`) || ILLUSTRATION_NOT_FOUND;
+	return registry.get(`${set}/${illustrationName}`);
 };
 
 export {

package/src/decorators/customElement.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns a custom element class decorator.
+ *
+ * @param { string } tag
+ * @returns { ClassDecorator }
+ */
+const customElement = (tag: string): ClassDecorator => {
+	return (target: any) => {
+		if (!Object.prototype.hasOwnProperty.call(target, "decoratorMetadata")) {
+			target.decoratorMetadata = {};
+		}
+
+		target.decoratorMetadata.tag = tag;
+	};
+};
+
+export default customElement;

package/src/decorators/event.ts

@@ -0,0 +1,28 @@
+import { EventData } from "../UI5ElementMetadata.js";
+
+/**
+ * Returns an event class decorator.
+ *
+ * @param { string } name the event name
+ * @param { EventData } data the event data
+ * @returns { ClassDecorator }
+ */
+const event = (name: string, data: EventData = {}): ClassDecorator => {
+	return (target: any) => {
+		if (!Object.prototype.hasOwnProperty.call(target, "decoratorMetadata")) {
+			target.decoratorMetadata = {};
+		}
+
+		const decoratorMetadata = target.decoratorMetadata;
+		if (!decoratorMetadata.events) {
+			decoratorMetadata.events = {};
+		}
+
+		const eventsMetadata = decoratorMetadata.events;
+		if (!eventsMetadata[name]) {
+			eventsMetadata[name] = data;
+		}
+	};
+};
+
+export default event;

package/src/decorators/fastNavigation.ts

@@ -0,0 +1,14 @@
+/**
+ * Class decorator, that sets the fastNavigation metadata.
+ * @param { any } target the decorated class
+ * @returns { void }
+ */
+const fastNavigation = (target: any): void => {
+	if (!Object.prototype.hasOwnProperty.call(target, "decoratorMetadata")) {
+		target.decoratorMetadata = {};
+	}
+
+	target.decoratorMetadata.fastNavigation = true;
+};
+
+export default fastNavigation;

package/src/decorators/languageAware.ts

@@ -0,0 +1,14 @@
+/**
+ * Class decorator, that sets the languageAware metadata.
+ * @param { any } target the decorated class
+ * @returns { void }
+ */
+const languageAware = (target: any): void => {
+	if (!Object.prototype.hasOwnProperty.call(target, "decoratorMetadata")) {
+		target.decoratorMetadata = {};
+	}
+
+	target.decoratorMetadata.languageAware = true;
+};
+
+export default languageAware;

package/src/decorators/property.ts

@@ -0,0 +1,30 @@
+import type UI5Element from "../UI5Element.js";
+import { Property } from "../UI5ElementMetadata.js";
+
+/**
+ * Returns a property decorator.
+ *
+ * @param { Property } propData
+ * @returns { PropertyDecorator }
+ */
+const property = (propData?: Property): PropertyDecorator => {
+	return (target: any, propertyKey: string | symbol) => {
+		const ctor = target.constructor as typeof UI5Element;
+
+		if (!Object.prototype.hasOwnProperty.call(ctor, "decoratorMetadata")) {
+			ctor.decoratorMetadata = {};
+		}
+
+		const decoratorMetadata = ctor.decoratorMetadata;
+		if (!decoratorMetadata.properties) {
+			decoratorMetadata.properties = {};
+		}
+
+		const propsMetadata = decoratorMetadata.properties;
+		if (!propsMetadata[propertyKey as string]) {
+			propsMetadata[propertyKey as string] = propData || { type: String };
+		}
+	};
+};
+
+export default property;