constructor( properties, values) {

		super();

		Object.defineProperties( this, {
				isUI: {
					configurable: false,
					enumerable: true,
					value: true
				}
			}
		);

		/**
		 *
		 * @type {Mesh|null}
		 * @internal
		 */
		this._backgroundMesh = null;



		/**
		 *
		 * @type {Material}
		 * @internal
		 */
		this._backgroundMaterial = null;

		/**
		 *
		 * @type {Material}
		 * @protected
		 */
		this._backgroundCustomDepthMaterial = null;

		/**
		 *
		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
		 * @protected
		 */
		this._backgroundMaterialMediation = {};

		/**
		 *
		 * @type {Object.<{m:string, t?:(value:any) => any}>}
		 * @private
		 */
		this._backgroundMeshMediation = {
			backgroundCastShadow: { m: 'castShadow' },
			backgroundReceiveShadow: { m: 'receiveShadow' },
			renderOrder: {m: 'renderOrder', t: renderOrderTransformer }
		};


		this._fog = new InheritableBooleanProperty("fog");

		/**
		 *
		 * @type {Mesh|null}
		 * @internal
		 */
		this._fontMesh = null;

		/**
		 *
		 * @type {InheritableMaterialProperty}
		 * @internal
		 */
		this._fontMaterial = new InheritableMaterialProperty('fontMaterial');

		/**
		 *
		 * @type {InheritableMaterialProperty}
		 * @private
		 */
		this._fontCustomDepthMaterial = new InheritableMaterialProperty('fontCustomDepthMaterial');

		/**
		 *
		 * @type {Object.<{m:string, t?:(value:any) => any}>}
		 * @private
		 */
		this._fontMeshMediation = {
			fontMaterial: { m: 'material' },
			fontCustomDepthMaterial: { m : 'customDepthMaterial', t:directTransferNotNull},
			fontCastShadow: { m: 'castShadow' },
			fontReceiveShadow: { m: 'receiveShadow' },
			renderOrder: {m: 'renderOrder' }
		};

		// Children lists

		/**
		 *
		 * @type {EmptyProperty|ChildrenBox|ChildrenText}
		 * @internal
		 */
		this._children = properties.children ? new properties.children : new EmptyProperty("children");
		this._parent = new ParentProperty();

		// update parentUI when this component will be added or removed
		this.addEventListener( 'added', this._rebuildParentUI );
		this.addEventListener( 'removed', this._rebuildParentUI );

		//material properties
		this._backgroundSide = new SideProperty( 'backgroundSide' );
		this._fontSide = new SideProperty( 'fontSide' );
		this._backgroundAlphaTest = new NumberProperty( 'backgroundAlphaTest', 0.02 );
		this._fontAlphaTest = new NumberProperty( 'fontAlphaTest', 0.02 );

		// mesh properties
		this._visible = new VisibleProperty( 'visible', true );

		this._backgroundCastShadow = new InheritableBooleanProperty( 'backgroundCastShadow' );
		this._fontCastShadow = new InheritableBooleanProperty( 'fontCastShadow' );
		this._backgroundReceiveShadow = new InheritableBooleanProperty( 'backgroundReceiveShadow' );
		this._fontReceiveShadow = new InheritableBooleanProperty( 'fontReceiveShadow' );

		// @TODO: RenderOrder for background and fonts
		this._renderOrder = new RenderOrderProperty();

		// @TODO : background & Text
		this._segments = properties.segments ? new properties.segments() : new SegmentsProperty();


		/**
		 *
		 * @type {BoundsBox|BoundsText|EmptyProperty}
		 * @ignore
		 * @internal
		 */
		this._bounds = properties.bounds ? new properties.bounds() : new EmptyProperty("bounds");

		// styles ---;

		this._order = new OrderProperty();

		this._padding = new PaddingProperty();
		this._margin = new MarginProperty();


		this._position = new PositionProperty();

		/**
		 *
		 * @type {FlexDirectionProperty}
		 * @internal
		 */
		this._flexDirection = properties.flexDirection ? new properties.flexDirection() : new FlexDirectionProperty();

		this._justifyContent = properties.justifyContent ? new properties.justifyContent() : new JustifyContentProperty();

		this._alignItems = properties.alignItems ? new properties.alignItems() : new AlignItemsProperty();

		this._display = new Display( 'flex' );

		this._boxSizing = new BoxSizing( 'border-box' );
		this._width = new WidthProperty();
		this._height = new HeightProperty();

		this._backgroundColor = properties.backgroundColor ? new properties.backgroundColor() : new BackgroundColorProperty();
		this._backgroundOpacity = new StyleFactorProperty('backgroundOpacity', 0.5 );
		this._backgroundImage = new BackgroundImage();
		this._backgroundSize = new BackgroundSize( 'cover' );

		this._color = properties.color ? new properties.color() : new StyleColorProperty('color', 'inherit');
		this._fontOpacity = new StyleFactorProperty( 'fontOpacity', 'inherit');

		this._whiteSpace = properties.whiteSpace ? new properties.whiteSpace() : new WhiteSpaceProperty();

		this._fontFamily = properties.fontFamily ? new properties.fontFamily() : new FontFamilyProperty();
		this._fontStyle = properties.fontStyle ? new properties.fontStyle() : new FontStyleProperty( 'normal' );
		this._fontWeight = properties.fontWeight ? new properties.fontWeight() : new FontWeightProperty();
		this._fontSize = properties.fontSize ? new properties.fontSize() : new FontSizeProperty();

		this._lineHeight = properties.lineHeight ? new properties.lineHeight() : new LineHeightProperty();

		this._fontKerning = properties.fontKerning ? new properties.fontKerning() : new FontKerningProperty();
		this._letterSpacing = properties.letterSpacing ? new properties.letterSpacing() : new LetterSpacingProperty();

		this._overflow = new Overflow( 'visible' );

		this._borderRadius = new BorderRadius( 0 );
		this._borderWidth = new BorderWidth( 0 );
		this._borderColor = new StyleColorProperty( 'borderColor', 0xff00ff );
		this._borderOpacity = new StyleFactorProperty( 'borderOpacity', 1);

		// styles ---;

		this._font = new FontProperty();

		this._lineBreak = properties.lineBreak ? new properties.lineBreak() : new EmptyProperty("lineBreak");

		/**
		 *
		 * @type {TextContentDefault|TextContentText|TextContentInline}
		 * @internal
		 */
		this._textContent = properties.textContent ? new properties.textContent() : new TextContentDefault();

		/**
		 *
		 * @type {GlyphsProperty}
		 * @internal
		 */
		this._glyphs = properties.glyphs ? new properties.glyphs() : new EmptyProperty("glyphs");

		this._inlines = properties.inlines ? new properties.inlines() : new EmptyProperty("inlines");


		/**
		 *
		 * @type {BoxLayouter|TextLayouter|EmptyProperty}
		 * @internal
		 */
		this._layouter = properties.layouter ? new properties.layouter() : new EmptyProperty("layouter");

		this._inlineJustificator = new InlineJustificator();

		this._textAlign = properties.textAlign ? new properties.textAlign() : new TextAlignProperty();

		this._autoSize = properties.autoSize ? new properties.autoSize() : new EmptyProperty("autoSize");

		this._renderer = properties.renderer ? new properties.renderer() : new EmptyProperty("renderer");

		this._offset = new OffsetProperty();

		// adds
		this._invertAlpha = new InvertAlphaProperty();
		this._fontSmooth = properties.fontSmooth ? new properties.fontSmooth() : new FontSmoothProperty();

		/**
		 *
		 * @type {Array.<BaseProperty>}
		 * @internal
		 */
		this._components = [

			this._textContent,
			this._children,
			this._parent,


			this._autoSize,


			this._fog,

			this._fontFamily,
			this._fontStyle,
			this._fontWeight,
			this._font,

			this._whiteSpace,


			this._glyphs,

			this._inlines,

			this._visible,

			// Meshes interfaces
			this._backgroundSide,
			this._fontSide,
			this._backgroundAlphaTest,
			this._fontAlphaTest,
			this._backgroundCastShadow,
			this._fontCastShadow,
			this._backgroundReceiveShadow,
			this._fontReceiveShadow,
			this._renderOrder,
			this._segments,
			// styles ---;

			this._padding,
			this._margin,
			this._width,
			this._height,
			this._borderWidth,
			this._boxSizing,

			this._bounds,

			this._position,


			this._flexDirection,
			this._justifyContent,
			this._alignItems,
			this._order,


			this._display,
			this._backgroundColor,
			this._backgroundOpacity,
			this._backgroundImage,
			this._backgroundSize,
			this._fontOpacity,
			this._color,


			// font : update order : WhiteSpace > Glyph > Inlines > Kerning > newlineBreakability > LineBreak > FontSize
			// font : process order : ??
			// this._font,

			this._fontSize,
			this._lineHeight,
			this._fontKerning,
			this._letterSpacing,

			this._borderRadius,
			this._borderColor,
			this._borderOpacity,

			// this._styles,
			// styles ---;
			this._lineBreak,
			this._offset,
			this._layouter,

			this._inlineJustificator,
			this._textAlign,


			// !! this._renderer renderer MUST NOT BE in components !!

			this._invertAlpha,
			this._fontSmooth,

			this._fontMaterial,
			this._fontCustomDepthMaterial,
			this._overflow,
			this._renderer,

		]


		/**
		 *
		 * @type {*[]}
		 * @private
		 */
		this._onAfterUpdates = [];


		// breaks inheritance chains
		// if( !values ) values = {};
		if( !values.backgroundSide ) values.backgroundSide = 0; // FrontSide


		if( values ) this.set( values );

	}
@param {Properties} properties
@param {Options} values