Localization

Localization represents the process of making something local in character or restricting it to a particular place. In the context of Smart HTML Elements, users can localize and change all Texts, Numeric, Date formats and built-in Error messages thrown by the Custom Elements.

Each custom element exposes three properties for localization:

• messages - defines the text and messages used in the UI components.

  Example:

  	'en': {
  		'propertyUnknownType': '\'{{name}}\' property is with undefined \'type\' member!',
  		'propertyInvalidValue': 'Invalid \'{{name}}\' property value! Actual value: {{actualValue}}, Expected value: {{value}}!',
  		'propertyInvalidValueType': 'Invalid \'{{name}}\' property value type! Actual type: {{actualType}}, Expected type: {{type}}!',
  		'elementNotInDOM': 'Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.',
  		'moduleUndefined': 'Module is undefined.',
  		'missingReference': '{{elementType}}: Missing reference to {{files}}.',
  		'htmlTemplateNotSuported': '{{elementType}}: Browser doesn\'t support HTMLTemplate elements.',
  		'invalidTemplate': '{{elementType}}: "{{property}}" property accepts a string that must match the id of an HTMLTemplate element from the DOM.'
  	}
  	

• locale - defines the messages from the messages object that will be used in the UI Components localization. By default, the property is set to 'en'.
• localize - function which allows you to localize manually a text.

  	const localizedError = that.localize('propertyUnknownType', { name: 'MyPropertyName'});                
  	

  The JSON object passed to the localize function call replaces the {{name}} in the messages object definition.