First commit

application/elements/button.js

@@ -0,0 +1,211 @@
+
+//import document 	from '/unify/document.js';
+
+export default class button{
+
+	height					= "fit-content";
+
+	layers					= 1;
+
+	fontWeight				= "normal";
+	
+	borderRadius			= "4px";
+
+	fontSize				= "12px";
+
+	cursor					= "pointer";
+
+	color					= "white";
+
+	width					= "fit-content";
+
+	
+	#ifdef ANDROID
+
+		borderRadius			= 40;
+
+		fontSize				= 15
+
+		margin					= 20;
+
+		width					= "-webkit-fill-available";
+
+		fontSize				= 22;
+
+		fontWeight				= "bold"
+
+		textAlign				= "center";
+
+		padding					= 20;
+
+
+
+		#ifdef LIGHT
+
+			background 				= "#f2f2f2";
+
+			color					= "#019e7c";
+
+			hoverBackgroundColor	= "#d9d9d9";
+
+			opaqueBackgroundColor	= "#f2f2f2";
+
+		#endif
+
+		#ifdef DARK
+
+			background 				= "#323232";
+
+			color					= "white";
+
+			//border					= "1px solid #3d3a3a";
+
+			hoverBackgroundColor	= "#3e3e3e";
+
+			opaqueBackgroundColor	= "#323232";
+
+		#endif
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+		border					= "1px solid #7f7b7b";
+
+		margin					= 12;
+
+		padding					= "8px 40px";
+
+		#ifdef LIGHT
+
+			background 				= "#0067C0";
+
+			color					= "white";
+
+			hoverBackgroundColor	= "rgb(86 141 189)";
+
+			opaqueBackgroundColor	= "#0067C0";
+
+		#endif
+
+		#ifdef DARK
+
+			background 				= "#323232";
+
+			color					= "white";
+
+			border					= "1px solid #3d3a3a";
+
+			hoverBackgroundColor	= "#3e3e3e";
+
+			opaqueBackgroundColor	= "#323232";
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		border					= "1px solid #7f7b7b";
+
+		margin					= 2;
+
+		margin					= "4px 2px"
+
+		padding					= "4px 20px";
+
+		#ifdef LIGHT
+
+			color					= "black";
+
+			background				= "white";
+
+			border					= "1px solid #e3e1e1";
+
+			fontSize				= 14;
+
+			opaqueBackgroundColor	= "white";
+
+			hoverBackgroundColor	= "rgb(230 231 230 / 65%)";
+
+		#endif
+
+		#ifdef DARK
+
+			color					= "white";
+
+			background				= "#282828";
+
+			hoverBackgroundColor	= "#3e3e3e";
+
+			opaqueBackgroundColor	= "#282828";
+
+		#endif
+
+	#endif
+
+	
+
+	display					= "block";
+
+	async mousedown() {
+/*
+
+		var backgroundAnimation = this.createAnimation("backgroundAnimation");
+
+		var key = backgroundAnimation.createKeyFrame( 0 );
+
+
+		key.setProperty( "background", this.background );
+
+
+
+		var key = backgroundAnimation.createKeyFrame( 100 );
+
+		
+		#ifdef WINDOWS
+
+			#ifdef DARK
+
+				key.setProperty( "background", "#484747" );
+
+			#endif
+
+		#endif
+		
+
+		var animationPromiseC =  await backgroundAnimation.play("500ms");
+
+		this.background = "076fc9";
+*/
+
+	}
+
+
+	mouseover() {
+
+		this.background = this.hoverBackgroundColor;
+
+	}
+
+	mouseleave() {
+
+		this.background = this.opaqueBackgroundColor;
+
+		#ifdef WINDOWS
+
+			#ifdef DARK
+
+				this.background = this.opaqueBackgroundColor;
+
+			#endif
+
+		#endif
+
+	}
+
+
+}
+

application/elements/checkbox.js

@@ -0,0 +1,37 @@
+
+import document 		from '/unify/document.js';
+
+export default class checkbox{
+
+	boxDisplay 				= "table-cell";
+
+	customElement			= document.createElement("input");
+
+	autoUpdate				= true;
+
+	inputType				= "checkbox";
+
+	useCustomElement 		= true;
+
+	editable				= true;
+	
+	layers					= 2;
+
+	parseChildren			= false;
+	
+
+	setType( type ) {
+
+		this.inputType = type;
+		
+	}
+
+	setup() {
+
+		this.customElement.setAttribute( "value", this.id );
+
+		this.customElement.setAttribute( "type", this.inputType );
+	
+	}
+
+}

application/elements/empty.js

@@ -0,0 +1,6 @@
+
+
+export default class empty{
+
+
+}

application/elements/fileChooser/fileChooser.file.icon.js

@@ -0,0 +1,33 @@
+
+import icon from "../icon.js";
+
+export default class fileChooserFileIcon extends icon{
+
+	width			= 50;
+
+	height			= 50;
+
+	layers			= 1;
+
+	backgroundSize	= "contain!important"
+
+	create() {
+
+		console.log("icon type", this.parent.fileType);
+
+
+		if( this.parent.fileType == "file" ) {
+
+			this.setImage( "assets/images/icons/file.png" );
+
+		}
+
+		if( this.parent.fileType == "directory" ) {
+
+			this.setImage( "assets/images/icons/folder.png" )
+
+		}
+
+	}
+
+}

application/elements/fileChooser/fileChooser.file.js

@@ -0,0 +1,34 @@
+
+
+import icon			from "./fileChooser.file.icon.js";
+
+import label 			from "../label.js";
+
+import checkbox 		from "/elements/checkbox.js";
+
+export default class file{
+
+	margin	= 10;
+
+
+	filename;
+
+	path;
+
+	create() {
+
+		var filename		= this.filename;
+
+		this.label.text 	= filename;
+
+	}
+
+	checkbox	= new checkbox();
+
+	icon		= new icon();
+
+	label		= new label();
+
+
+
+}

application/elements/fileChooser/fileChooser.files.js

@@ -0,0 +1,76 @@
+
+#ifdef SERVER
+
+	import fs			from "fs";
+
+	import path			from "path";
+
+#endif
+
+
+import file						from "./fileChooser.file.js";
+
+export default class fileChooserFiles{
+	
+	async open() {
+
+		var relativePath	= "./";
+
+		var systemPath		= await this.getSystemPath( relativePath )
+
+		var files 			= await this.getDirectory( systemPath );
+	
+	}
+
+	node async getSystemPath( relativePath ) {
+
+		var absolutePath	= path.resolve( relativePath );
+
+		console.log("getSystemPath", absolutePath);
+
+		return absolutePath;
+
+	}
+
+	node async getDirectory( absolutePath ) {
+
+		var files	= fs.readdirSync( absolutePath );
+
+
+		for (var i = 0; i < files.length; i++) {
+
+			var filename					= files[i];
+
+			var fileStat					= fs.lstatSync( absolutePath + "/" + filename );
+
+
+			var currentFile 				= new file();
+
+
+			currentFile.filename			= filename;
+
+			currentFile.path				= absolutePath;
+
+			if( fileStat.isDirectory() ) {
+
+				currentFile.fileType	= "directory";
+
+			} else {
+
+				currentFile.fileType	= "file";
+
+			}
+			
+			console.log("add file", currentFile);
+
+			this.add( currentFile );
+
+		}
+
+		console.log("readdirSync", files);
+
+		return files;
+
+	}
+
+}

application/elements/fileChooser/fileChooser.js

@@ -0,0 +1,51 @@
+
+import files					from "./fileChooser.files.js";
+
+import selectButton				from "./fileChooser.select.button.js";
+
+export default class fileChooser{
+
+	//selector		= "#application";
+
+	zIndex			= 1000;
+
+	left			= 0;
+
+	top				= 0;
+
+	width			= "100vw"
+
+	height			= "100vh"
+
+	flexDirection	= "column"
+
+	display			= "none"
+
+
+
+	#ifdef LIGHT
+
+		background		= "white"
+
+	#endif
+
+	
+
+
+	files			= new files();
+
+	selectButton	= new selectButton();
+
+	open() {
+
+		this.files.open();
+
+	}
+
+	async create() {
+
+		this.hide();
+
+	}
+
+}

application/elements/fileChooser/fileChooser.select.button.js

@@ -0,0 +1,22 @@
+
+import button 		from "/elements/button.js";
+
+
+export default class fileChooserSelectButton extends button {
+
+	layers = 2;
+
+
+	click() {
+		alert("asd")
+		console.log("click", this);
+		/*
+		var files = this.parent.files.getChildren();
+		//console.log(files);
+		for (var i = 0; i < files.length; i++) {
+			console.log(files[i].checkbox.value, files[i].path, files[i].filename);
+		}
+*/
+	}
+
+}

application/elements/fileUpload.js

@@ -0,0 +1,45 @@
+
+
+import input 				from './input.js';
+
+
+import Console				from '/unify/console.js';
+
+import promiseManager	 	from '/unify/promiseManager.js';
+
+import shared	 			from '/unify/shared.js';
+
+
+export default class fileUpload extends input{
+
+	inputType			= "file";
+
+	attribute			= "multiple";
+	
+	promiseManager		= new promiseManager();
+	
+	uploadID 			= 0;
+
+	fileInformation 	= new Array();
+
+	path				= "/assets/uploads/";
+
+	customFileName		= false;
+
+
+	constructor() {
+
+		super();
+
+	}
+
+	create() {
+
+		this.customElement.setAttribute("type", this.inputType);
+		this.customElement.setAttribute("multiple", "true");
+
+	}
+
+
+}
+

application/elements/filler.js

@@ -0,0 +1,41 @@
+
+
+export default class filler{
+
+	layers			= 1;
+
+	height			= "-webkit-fill-available";
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffff";
+
+		#endif
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			color				= "black";
+
+		#endif
+
+
+		#ifdef DARK
+		
+		#endif
+
+	#endif
+
+	width			= "-webkit-fill-available";
+
+}

application/elements/flexbox.js

@@ -0,0 +1,39 @@
+
+
+export default class flexbox{
+	
+	renderToDOM		= true;
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			color		= "white";
+
+		#endif
+
+		#ifdef LIGHT
+
+			color		= "black";
+
+		#endif
+
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			color		= "white";
+
+		#endif
+
+		#ifdef LIGHT
+
+			color		= "black";
+
+		#endif
+
+	#endif
+
+}

application/elements/gridView/gridView.body.js

@@ -0,0 +1,54 @@
+
+
+
+
+export default class gridViewTableHeader{
+
+	flexFlow			= "column";
+	
+	display				= "table-row-group"
+
+	layers				= 1;
+
+
+	#ifdef WINDOWS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+		background	= "white";
+
+		#endif
+		
+	#endif
+
+
+
+	#ifdef MACOS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+			background		= "#2c2c2c";
+
+			fontWeight		= "bold";
+
+		#endif
+
+		#ifdef LIGHT
+
+
+			background		= "rgb(0 0 0 / 1%)";
+			
+		#endif
+		
+	#endif
+
+}

application/elements/gridView/gridView.body.row.column.js

@@ -0,0 +1,54 @@
+
+
+import tableCell 	from "/elements/tableCell.js";
+
+export default class gridViewBodyColumn extends tableCell{
+
+	useCustomElement	= false;
+
+	layers				= 1;
+
+
+	#ifdef WINDOWS
+
+		padding				= 20;
+
+		#ifdef DARK
+
+			paddingLeft			= 30;
+
+			//borderLeft			= "1px solid #24364e7a";
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		padding					= 12;
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef ANDROID
+
+		padding				= 20;
+
+	#endif
+
+	
+}

application/elements/gridView/gridView.body.row.js

@@ -0,0 +1,13 @@
+
+
+
+
+export default class gridViewRow{
+
+	display				= "table-row";
+	
+	layers				= 1;
+
+	propegateEvent		= false;
+
+}

application/elements/gridView/gridView.header.js

@@ -0,0 +1,59 @@
+
+
+
+
+export default class gridViewHeader{
+
+	display			= "table-header-group"
+
+	layers			= 1;
+
+	flexFlow		= "column";
+
+
+	#ifdef WINDOWS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+
+
+		#endif
+
+		#ifdef LIGHT
+
+			background				= "#ffffffa8"
+
+			borderBottom			= "1px solid rgb(0 0 0 / 5%)"
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		fontSize	= 12;
+
+		#ifdef DARK
+
+			background	= "#393939";
+
+			borderBottom	= "2px solid #3f3f3f";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background				= "rgb(0 0 0 / 3%)"
+
+			borderBottom			= "1px solid rgb(0 0 0 / 5%)"
+
+		#endif
+		
+	#endif
+
+
+
+}

application/elements/gridView/gridView.header.row.column.js

@@ -0,0 +1,126 @@
+
+
+import tableCell 	from "/elements/tableCell.js";
+
+import sortBy 		from "./gridView.header.row.column.sortBy.js";
+
+
+export default class gridViewRowColumn extends tableCell{
+
+	display					= "table-cell";
+	
+	layers					= 1;
+
+	propegateEvent			= false;
+
+	useCustomElement		= false;
+
+	cursor					= "pointer";
+
+	hoverBackgroundColor	= "#363333"
+
+	async click() {
+
+		var renderCollection		= this.parent.parent.parent.body;
+
+		renderCollection.sort		= this.propertyName;
+
+		this.unselectOtherColumns();
+
+		var direction	= this.selectThisColumn();
+
+		renderCollection.direction	= direction;
+
+		renderCollection.update();
+
+	}
+
+	unselectOtherColumns() {
+
+		var columns	= this.parent.getChildren();
+
+		for (var i = 0; i < columns.length; i++) {
+
+			var column	= columns[i];
+
+			if( column.sortBy ) {
+
+				column.sortBy.text	= "";
+
+			}
+
+		}
+
+	}
+
+	selectThisColumn() {
+
+		if( this.sortBy.type == "asc" ) {
+
+			this.sortBy.transform	= "rotate(90deg)";
+
+			this.sortBy.type = "desc"
+
+		} else {
+
+			this.sortBy.transform	= "rotate(-90deg)";
+
+			this.sortBy.type = "asc"
+
+		}
+
+		this.sortBy.text		= "<";
+
+		return this.sortBy.type;
+
+	}
+
+
+	#ifdef WINDOWS
+
+		padding				= 10;
+
+		paddingRight		= 40;
+
+		paddingLeft			= 20;
+
+		#ifdef DARK
+
+			paddingLeft			= 30;
+
+			//borderLeft			= "1px solid #24364e7a";
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		padding					= 10;
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef ANDROID
+
+		padding				= 20;
+
+	#endif
+
+	sortBy					= new sortBy();
+	
+}

application/elements/gridView/gridView.header.row.column.sortBy.js

@@ -0,0 +1,19 @@
+
+
+import button	from "/elements/button.js";
+
+export default class sortBy{
+	
+	text			= ""
+
+	transition		= "none"
+
+	layers			= 1;
+
+	float			= "right"
+
+	transform;
+
+	type			= "desc"
+
+}

application/elements/gridView/gridView.header.row.js

@@ -0,0 +1,13 @@
+
+
+
+
+export default class gridViewTableRow{
+
+	display				= "table-row";
+	
+	propegateEvent		= false;
+
+	layers				= 1;
+
+}

application/elements/gridView/gridView.js

@@ -0,0 +1,80 @@
+
+
+export default class gridView{
+
+	display					= "table";
+
+	layers					= 1;
+
+	fontSize				= 12;
+
+
+
+	borderCollapse			= "separate";
+
+	borderSpacing			= "0";
+
+	borderRadius			= 12;
+
+	overflow				= "hidden";
+	
+
+
+	#ifdef WINDOWS
+
+		margin				= 30;
+
+		borderRadius		= 4;
+
+		#ifdef DARK
+
+			background		= "#202020"
+
+			color			= "white"
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+	#ifdef MACOS
+
+		margin			= 2;
+
+		borderRadius	= 4;
+
+		#ifdef DARK
+
+			color			= "white"
+		
+			border			= "1px solid #4f4f4f"
+
+		#endif
+
+		#ifdef LIGHT
+
+			border			= "1px solid rgb(0 0 0 / 5%)"
+
+		#endif
+		
+	#endif
+
+	#ifdef ANDROID
+
+
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+
+	#endif
+
+	propegateEvent		= false;
+
+}

application/elements/header.js

@@ -0,0 +1,95 @@
+
+
+export default class header{
+
+	constructor( text, gridName ) {
+
+		this.text 		= text;
+		this.gridArea 	= gridName;
+
+	}
+
+	gridArea	= "passwordLabel";
+
+	text		= "password";
+
+	color		= "#665f5f";
+
+	padding		= 10;
+
+
+
+	#ifdef WINDOWS
+
+		fontWeight	= "bold";
+
+		fontSize	= 24;
+
+		margin		= 0;
+
+		#ifdef DARK
+
+			color	= "white"
+
+			//background	= "#1c1c1c61";
+
+		#endif
+
+		#ifdef LIGHT
+
+			color	= "#282626";
+
+		#endif
+		
+	#endif
+
+
+	#ifdef MACOS
+
+		margin		= 6;
+
+		fontWeight	= "bold";
+
+		fontSize	= 16;
+
+		marginLeft	= 4;
+
+		#ifdef DARK
+
+			color	= "white"
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+		
+	#endif
+
+
+	#ifdef ANDROID
+
+		text 				= "Menu";
+
+		flexDirection		= "column";
+
+		fontSize			= 36;
+
+		paddingTop			= 100;
+
+		fontWeight			= "300"
+
+		paddingBottom		= 100;
+
+		textAlign			= "center";
+
+		width				=  "100vw";
+
+		padding				= "0"
+
+		margin				= 0;
+
+	#endif
+
+}
+

application/elements/icon.js

@@ -0,0 +1,66 @@
+
+import button	 		from './button.js';
+
+var icon_id = 0;
+
+
+export default class icon{
+
+	id		= icon_id++;
+	
+	constructor( name, invert ) {
+		
+		if( name ) {
+
+			this.background		= "url( assets/images/icons/" + name + " )";
+
+		} 
+		
+		if( invert ) {
+		
+			this.invert	= 1;
+			this.filter	= "invert(" + this.invert + ") "; //drop-shadow(0 0 4px white)
+		
+		} else {
+		
+			this.invert	= 0;
+			this.filter	= "invert(" + this.invert + ") "; //drop-shadow(0 0 4px white)
+		}
+		
+	}
+	
+	setImage( path ) {
+
+		this.background		= "url( " + path + " )";
+
+	}
+
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			filter				= "invert(0)"
+			
+		#endif
+
+		#ifdef DARK
+
+			filter				= "invert(1)"
+
+		#endif
+
+	#endif
+
+	
+	filter				= "invert(1)";
+
+	editable			= false;
+
+	backgroundSize		= "contain";
+	
+	width				= 20;
+
+	height				= 20;
+
+}

application/elements/iconButton.js

@@ -0,0 +1,74 @@
+
+import label	 		from './label.js';
+import icon	 			from './icon.js';
+
+
+class customLabel extends label{
+
+	color 		= "black";
+
+	constructor( text, color ) {
+
+		super();
+
+		if( color ) {
+		
+			this.color = color;
+		
+		}
+	
+		this.text 		= text;
+
+		this.value 		= text;
+		
+	}
+	
+	setActive() {
+	
+		//this.fontWeight		= "bold";
+		//this.textShadow 		= "#dfdfdf 1px 0px 5px";
+
+	}
+	
+	setInactive() {
+
+		//this.fontFamily	= "TT Norms Pro Regular";
+		//this.color		= "#bdbdbd";
+		//this.fontWeight	= "normal";
+		//this.textShadow 	= "none";
+	
+	}
+	
+	create() {
+	
+		//this.fontFamily	= "TT Norms Pro Regular";
+	
+	}
+	
+	click() {
+	
+		console.log("click label");
+	
+		//this.setActive();
+	
+	}
+
+	fontSize			= "14px";
+
+	editable			= false;
+
+}
+
+
+
+
+export default class iconButton{
+
+	constructor( text, iconName, mirror = true, color ) {
+	
+		this.label		= new customLabel( text, color );
+		this._icon		= new icon( iconName, mirror );
+
+	}
+
+}

application/elements/image.js

@@ -0,0 +1,20 @@
+
+import document 	from '/unify/document.js';
+
+var icon_id = 0;
+
+export default class image{
+	
+	customElement = document.createElement("img");
+
+	useCustomElement	= true;
+	
+	id		= icon_id++;
+
+	setImage( path ) {
+	
+		this.customElement.setAttribute("src", path)
+
+	}
+
+}

application/elements/input.js

@@ -0,0 +1,501 @@
+
+import document 		from '/unify/document.js';
+
+import tools	 		from '/unify/tools.js';
+
+
+export default class input {
+
+	renderToDOM				= true;
+
+	value 					= "";
+	
+	disabled				= false;
+
+	customElement 			= document.createElement("input");
+	
+	inputType				= "text";
+	
+	layers					= 2;
+	
+	useCustomElement		= true;
+
+	autocomplete			= "on";
+
+	placeholder				= "";
+
+	outline 				= "none";
+
+	validateType			= "default";
+
+	fontSize				= 16
+
+	border					= "1px solid #ececec";
+
+	layers					= 1;
+
+	propegateEvent			= false;
+
+	width					= "-webkit-fill-available"
+
+
+
+	#ifdef MACOS
+
+		width					= "70%";
+
+		#ifdef LIGHT
+
+	
+
+
+			borderBottom			= "1px solid #dedede"
+
+			background				= "#f7f7f7";
+
+
+			color					= "black";
+
+			opaqueBackgroundColor	= "#f7f7f7";
+
+
+
+			focusBackgroundColor	= "#f7f7f7";
+
+			focusBorderBottom		= "1px solid #dedede";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+			color					= "#b1b1b1";
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "rgb(255 255 255 / 3%)";
+
+			color					= "white";
+
+			opaqueBackgroundColor	= "rgb(255 255 255 / 3%)";
+
+
+
+			focusBackgroundColor	= "rgb(255 255 255 / 3%)";
+
+			focusBorderBottom		= "";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "";
+
+
+		#endif
+
+
+
+		padding					= 12;
+
+		margin					= 6;
+
+		marginRight				= 20;
+
+		height					= "fit-content";
+
+		borderRadius			= 0;
+
+		fontWeight				= "bold";
+
+		fontSize				= 10;
+
+		border					= "1px solid rgba(255,255,255,0.04)";
+
+		padding					= 12;
+
+		fontSize				= "";
+
+		borderRadius			= 6;
+
+		borderBottom			= "none";
+
+		width					= "auto"
+
+
+
+		
+
+	#endif
+	
+
+	
+
+	#ifdef WINDOWS
+
+		borderBottom			= "2px solid #868686"
+
+		borderRadius			= 6;
+
+		padding					= 12;
+
+		margin					= 12;
+
+		height					= "fit-content"
+
+		#ifdef LIGHT
+
+			background				= "#F7FAFC";
+
+			border					= "1px solid #E5E5E5";
+
+			opaqueBackgroundColor	= "#F7FAFC";
+
+
+			focusBackgroundColor	= "white";
+
+			focusBorderBottom		= "2px solid #4CC2FF";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "#1d1d1d!important"
+
+			webkitBoxShadow			= "inset 0 0 20px 20px #1c1c1c";
+
+			webkitTextFillColor		= "white";
+
+			color					= "white"
+
+			transition				= "background-color 5000s ease-in-out 0s";
+
+
+			border					= "1px solid #303030";
+
+			borderBottom			= "2px solid #9A9A9A";
+
+			color					= "WHITE";
+
+			opaqueBackgroundColor	= "#1d1d1d!important";
+
+
+			focusBackgroundColor	= "#1F1F1F";
+
+			focusBorderBottom		= "2px solid #0067C0";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "1px solid #9A9A9A";
+
+	
+
+		#endif
+	
+
+	#endif
+
+
+
+	focus() {
+
+		this.borderBottom		= this.focusBorderBottom;
+
+		this.background			= this.focusBackgroundColor;
+
+	}
+
+	blur() {
+
+		this.background			= this.blurBackgroundColor;
+
+		this.borderBottom		= this.blurBorderBottom;
+
+	}
+
+	setup( ) {
+		
+		var that =  this;
+
+		that._useCustomElement = this.useCustomElement;
+
+		this.__defineSetter__( "useCustomElement", function( value ) { 
+		
+			that._useCustomElement = value;
+			
+			that.setupElement();
+
+		});
+		
+		this.__defineGetter__( "useCustomElement", function( value ){ 
+			
+			if( typeof that._useCustomElement == "undefined" ) {
+			
+				that._useCustomElement = false;
+	
+				
+				return false;
+				
+			} else {
+			
+				return that._useCustomElement;
+				
+			}
+		});
+
+		this.setupElement();
+		
+	}
+	
+	
+	// For AutoComplete -> but makes that you cannot overide or it happens again
+	change() {
+	
+		this.value = this.customElement.value;
+	
+	}
+
+	setupElement() {
+
+		this.customElement.setAttribute( "type", this.inputType );
+
+		this.customElement.setAttribute( "autocomplete", this.autocomplete );
+
+		this.customElement.setAttribute( "placeholder", this.placeholder );
+		
+
+		if( this.step ) {
+
+			this.customElement.setAttribute( "step", this.step );
+		}
+		
+
+		if( this.placeholder && this.customElement ) {
+
+			this.customElement.setAttribute( "placeholder", this.placeholder );
+
+		}
+
+		if( this.width ) {
+
+			if( typeof this.width == "number" ) {
+
+				this.customElement.style.width = this.width + "px"; 
+
+			} else {
+
+				this.customElement.style.width = this.width;
+
+			}
+
+			
+
+		}
+
+
+		if( this.element ) {
+		
+			var parentNode = this.element.parentNode;
+			
+			if( this.useCustomElement ) {
+
+
+			
+				if( this.element.tagName != this.customElement.tagName ) {
+
+					parentNode.replaceChild( this.customElement, this.element );
+					
+					this.element = this.customElement;
+				
+				}
+			
+			} else {
+			
+				if( this.element.tagName != this.defaultElement.tagName ) {
+			
+					parentNode.replaceChild( this.defaultElement, this.element );
+					
+					this.element = this.defaultElement;
+				
+				}
+				
+			}
+			
+			this.updateElementContent();
+		
+		}
+
+	}
+
+
+
+	isValid() {
+
+		if( !this.value ) {
+
+			return false;
+
+		}
+
+		return this.validateString( this.value );
+
+	}
+
+	validateEmail(email) {
+
+		const res = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+		
+		return res.test(String(email).toLowerCase());
+
+	}
+
+	validateString( value ) {
+
+		var isValid 	= true;
+
+		if( !this.value ) {
+
+			return false;
+
+		}
+
+
+		switch( this.validateType ) {
+
+			case "default":
+
+				if( this.minLength ) {
+
+					if( value.length < this.minLength ) {
+
+						return false;
+
+					}
+
+				}
+
+			break;
+
+			case "email":
+
+				return this.validateEmail( this.value );
+
+			break;
+
+
+		}
+
+
+		return true;
+
+	}
+
+
+
+	validateInput() {
+
+		if( this.validateString( this.value ) ) {
+
+			this.removeErrorMessages();
+
+			this.validated		= true;
+
+			console.log("remove errorBlock");
+
+
+			this.border			= "#28a745";
+
+			this.color			= "#495057";
+
+			this.shadow			= "0px 0px 4px 2px #28a745";
+
+		} else {
+
+			this.validated		= false;
+
+			this.border			= "1px solid #dc3545";
+
+			this.color			= "black";
+
+			this.shadow			= "0px 0px 4px 2px #dc3545";
+
+		}
+
+	}
+
+/*
+	focus() {
+
+		this.validateInput();
+
+		this.customElement.focus();
+		
+	}
+*/
+	removeErrorMessages() {
+
+		var errorBlocks = document.querySelectorAll(".errorBlock");
+
+		for (var i = 0; i < errorBlocks.length; i++) {
+
+			errorBlocks[i].remove();
+
+		}
+
+	}
+
+	showError( text ) {
+
+		this.removeErrorMessages();
+
+		var errorBlock	= document.createElement("div");
+
+
+		errorBlock.innerText	= text;
+
+		errorBlock.className	= "errorBlock";
+
+		this.boxElement.appendChild( errorBlock );
+
+	}
+
+
+	afterLoad() {
+
+		if( this.validate ) {
+
+			//this.validateInput();
+
+		}
+		
+
+	}
+
+	async keyup( event ){
+
+		this.value = event.target.value;
+
+		if( this.validate ) {
+
+			this.validateInput();
+
+		}
+
+
+	}
+
+}
+

application/elements/inputPassword.js

@@ -0,0 +1,27 @@
+
+import input 	from './input.js';
+
+export default class inputPassword extends input{
+
+	inputType	= "password";
+
+
+	outline 	= "none";
+
+	constructor(){
+	
+		super();
+		
+		this.type = "password";
+		
+	}
+	
+	
+	create() {
+	
+		this.customElement.setAttribute("type",  this.inputType);
+	
+	}
+	
+}
+

application/elements/label.js

@@ -0,0 +1,77 @@
+
+export default class label{
+
+	constructor( text, gridName ) {
+
+		this.text 		= text;
+		
+		this.gridArea 	= gridName;
+
+	}
+
+
+	layers			= 1;
+
+	gridArea		= "passwordLabel";
+
+	text			= "password";
+
+	color			= "black";
+
+	padding			= 20;
+
+	fontSize		= 12;
+
+
+	#ifdef WINDOWS
+
+		fontWeight		= "bold";
+
+		
+
+		#ifdef LIGHT
+
+
+			color	= "#282626";
+
+		#endif
+
+
+		#ifdef DARK
+
+			color	= "white";
+
+		#endif
+	
+
+	#endif
+
+
+	#ifdef MACOS
+
+		padding					= 10;
+
+		paddingLeft				= 0;
+
+		boxWidth				= "100%";
+
+
+		#ifdef LIGHT
+
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color	= "white";
+
+		#endif
+	
+
+	#endif
+
+
+}

application/elements/label/left.js

@@ -0,0 +1,10 @@
+
+import label from "../label.js";
+
+export default class leftLabel extends label{
+
+	width		= "30%"
+	
+	justifyContent	=  "flex-end";
+
+}

application/elements/option.js

@@ -0,0 +1,231 @@
+
+import document 		from '/unify/document.js';
+
+
+export default class option{
+
+	customElement		= document.createElement("option");
+	
+	layers				= 1;
+
+	parseChildren		= false;
+	
+	useCustomElement 	= true;
+
+	editable			= true;
+
+	preventUpdating		= true;
+
+	padding				= 4;
+
+
+
+	#ifdef MACOS
+
+		width					= "70%";
+
+		#ifdef LIGHT
+
+	
+
+
+			borderBottom			= "1px solid #dedede"
+
+			background				= "#f7f7f7";
+
+
+			color					= "black";
+
+			opaqueBackgroundColor	= "#f7f7f7";
+
+
+
+			focusBackgroundColor	= "#f7f7f7";
+
+			focusBorderBottom		= "1px solid #dedede";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+			color					= "#b1b1b1";
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "rgb(255 255 255 / 3%)";
+
+			color					= "white";
+
+			opaqueBackgroundColor	= "rgb(255 255 255 / 3%)";
+
+
+
+			focusBackgroundColor	= "rgb(255 255 255 / 3%)";
+
+			focusBorderBottom		= "";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "";
+
+
+		#endif
+
+
+
+		padding					= 6;
+
+		margin					= 6;
+
+		marginRight				= 20;
+
+		height					= "fit-content";
+
+		borderRadius			= 0;
+
+		fontWeight				= "bold";
+
+		fontSize				= 10;
+
+		border					= "1px solid rgb(255 255 255 / 18%)";
+
+		padding					= 12;
+
+		fontSize				= "";
+
+		borderRadius			= 6;
+
+		borderBottom			= "none";
+
+		width					= "auto"
+
+
+
+		
+
+	#endif
+	
+
+	
+
+	#ifdef WINDOWS
+
+		borderBottom			= "2px solid #868686"
+
+		borderRadius			= 6;
+
+		padding					= 8;
+
+		margin					= 12;
+
+		#ifdef LIGHT
+
+			background				= "#F7FAFC";
+
+			border					= "1px solid #E5E5E5";
+
+			opaqueBackgroundColor	= "#F7FAFC";
+
+
+			focusBackgroundColor	= "white";
+
+			focusBorderBottom		= "2px solid #4CC2FF";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "#2D2D2D!important"
+
+			webkitBoxShadow			= "0 0 0px 30px #2D2D2D inset!important";
+
+			webkitTextFillColor		= "white";
+
+			color					= "white"
+
+			transition				= "background-color 5000s ease-in-out 0s";
+
+
+			border					= "1px solid #303030";
+
+			borderBottom			= "2px solid #9A9A9A";
+
+			color					= "WHITE";
+
+			opaqueBackgroundColor	= "#2D2D2D!important";
+
+
+			focusBackgroundColor	= "#1F1F1F";
+
+			focusBorderBottom		= "2px solid #0067C0";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "1px solid #9A9A9A";
+
+	
+
+		#endif
+	
+
+	#endif
+
+
+	constructor( value, label ) {
+
+		if( value ) {
+
+			this.value = value;
+
+		}
+
+		if( label ) {
+
+			this.label = label;
+
+		}
+
+	}
+	
+	setup() {
+
+		if( this.label ) {
+
+			this.customElement.innerHTML	= this.label;
+
+			this.customElement.value 		= this.value;
+
+		}
+
+		if( this.selected ) {
+
+			this.customElement.setAttribute("selected", "true")
+
+		}
+
+
+	}
+
+}
+
+
+
+
+
+

application/elements/page.js

@@ -0,0 +1,66 @@
+
+export default class page{
+
+
+	#ifdef ANDROID
+
+		height				= "100vh"
+
+		padding				= 0;
+
+		borderRadius		= 0;
+
+		#ifdef LIGHT
+
+			background		= "#f2f2f2";
+
+		//	background		= "#000000";
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background      = "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background      = "#fdfdfd";
+
+		#endif
+
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			background		= "#202020cc";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "rgb(255 255 255 / 75%)";
+
+		#endif
+
+	#endif
+
+	padding				= 20;
+
+	height				= "-webkit-fill-available";
+
+	minHeight			= 400;
+
+	width				= "-webkit-fill-available";
+
+	paddingRight		= 80;
+	
+}

application/elements/panel.js

@@ -0,0 +1,58 @@
+
+
+export default class panel{
+
+	layers		= 1;
+
+	width				= "100%"
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+
+		#endif
+
+		#ifdef DARK
+
+		#endif
+
+		borderRadius	= 12;
+
+
+	#endif
+
+	#ifdef MACOS
+
+		#ifdef LIGHT
+
+			border				= "1px solid rgb(241 241 241)"
+
+			background			= "#fbfbfb";
+
+			borderRadius		= 6;
+
+			marginRight			= 20;
+
+
+		#endif
+
+		#ifdef DARK
+
+			border				= "1px solid #ffffff26"
+
+			background			= "rgb(255 255 255 / 4%)";
+
+			width				= "100%"
+	
+			borderRadius		= 6;
+
+			marginRight			= 20;
+
+		#endif
+
+	#endif
+
+
+
+}

application/elements/panel/row.js

@@ -0,0 +1,73 @@
+
+
+export default class panelRow{
+	
+	width			= "100%";
+
+	//layers			= 1;
+	sizing			= "border-box";
+
+
+	#ifdef WINDOWS
+
+		marginTop			= 20;
+
+		#ifdef LIGHT
+
+			background		= "#F7FAFC";
+
+		#endif
+
+		#ifdef DARK
+
+			background	= "#2b2b2b";
+
+			background	= "#0c0e165c";
+
+		#endif
+
+		borderRadius	= 12;
+
+
+	#endif
+
+
+
+	afterLoad() {
+
+		#ifdef MACOS
+
+			var children 	= this.parent.getChildren();
+
+			var count		= children.length-1
+
+			var lastChild	= children[count]
+
+			lastChild.borderBottom	= "none";
+
+		#endif
+
+	}
+
+
+	#ifdef MACOS
+
+		margin		= "0 6px";
+
+		#ifdef LIGHT
+
+			borderBottom		= "1px solid rgb(241 241 241)"
+
+		#endif
+
+		#ifdef DARK
+
+			borderBottom		= "1px solid #ffffff26"
+
+			width				= "96%"
+
+		#endif
+
+	#endif
+
+}

application/elements/preloaders/simpleSpinner.js

@@ -0,0 +1,75 @@
+
+import document 	from "/unify/document.js";
+
+
+
+class line{
+
+	layers			= 1;
+
+	display			= "block";
+
+
+
+	create() {
+
+		//this.element.className = "loader-line";
+
+		this.element.classList.add("loader-line-dark")
+
+	}
+
+}
+
+class lineMask{
+
+	layers			= 1;
+
+	display			= "block";
+
+
+	line			= new line();
+
+	create() {
+
+		//this.element.className = "loader-line-mask";
+		this.element.classList.add("loader-line-mask")
+	}
+
+}
+
+
+
+
+
+
+export default class preloaderBox{
+
+	layers			= 1;
+
+	margin			= 40
+
+	left			= "0"
+
+	top				= "0"
+
+
+	//marginTop		= "0px!important"
+
+	//marginLeft		= "0px!important";
+
+
+
+	position		= "relative!important"
+
+	lineMask		= new lineMask();
+
+
+	create() {
+
+		this.element.classList.add("loader-circle")
+
+	}
+
+
+}

application/elements/preloaders/spinner.js

@@ -0,0 +1,75 @@
+
+import document 	from "/unify/document.js";
+
+
+class circle{
+
+	customElement 		= document.createElementNS("http://www.w3.org/2000/svg","circle"); 
+
+	useCustomElement	= true;
+
+	layers				= 1;
+
+	zIndex				= 1000;
+
+	boxShadow			= "inset 0 0 0 1px rgb(0 0 0 / 50%)!important"
+
+	create() {
+
+		this.customElement.setAttributeNS(null,"cx", "50")
+
+		this.customElement.setAttributeNS(null,"cy", "50")
+
+		this.customElement.setAttributeNS(null,"r", "20")
+
+		this.customElement.setAttributeNS(null,"fill", "none")
+
+		this.customElement.setAttributeNS(null,"stroke-width", "2")
+
+		this.customElement.setAttributeNS(null,"stroke-miterlimit", "10")
+
+		this.customElement.setAttributeNS(null,"box-shadow", "inset 0 0 0 1px rgb(0 0 0 / 50%)!important")
+
+
+
+		this.customElement.classList.add('path-dark');
+
+
+
+	}
+
+
+}
+
+class spinner{
+
+	customElement 		= document.createElementNS("http://www.w3.org/2000/svg", "svg");
+
+	useCustomElement	= true;
+
+	layers				= 1;
+
+	circle				= new circle();
+
+	create() {
+
+		this.customElement.setAttributeNS(null,"viewBox", "25 25 50 50")
+
+		this.element.setAttributeNS(null, "class", "circular");
+	}
+
+}
+
+
+export default class preloaderBox{
+
+	layers			= 1;
+
+	margin			= 40
+
+	width			= 40;
+
+	spinner			= new spinner();
+
+
+}

application/elements/radioButton.js

@@ -0,0 +1,15 @@
+
+import checkbox 				from '/elements/checkbox.js';
+
+
+export default class radio extends checkbox{
+
+	constructor( object ) {
+
+		super( object );
+
+		this.setType("radio");
+
+	}
+
+}

application/elements/select.js

@@ -0,0 +1,251 @@
+
+import header	 			from './header.js';
+import button	 			from './button.js';
+
+import querySQL	 			from '/unify/querySQL.js';
+import renderCollection		from '/unify/renderCollection.js';
+import document 			from '/unify/document.js';
+
+
+import permission			from '/user/group/user.group.permission.js';
+
+
+export default class select extends renderCollection { 
+
+	values					= new Array();
+
+	width					= 200;
+	
+	layers					= 1;
+
+	customElement			= document.createElement("select");
+
+	useCustomElement 		= true;
+	
+	editable				= true;
+
+	typedSelect				= false;
+
+	debug					= true;
+
+	#ifdef WINDOWS
+
+		borderBottom			= "2px solid #868686"
+
+		borderRadius			= 6;
+
+		padding					= 8;
+
+		margin					= 12;
+
+		#ifdef LIGHT
+
+			background				= "#F7FAFC";
+
+			border					= "1px solid #E5E5E5";
+
+			opaqueBackgroundColor	= "#F7FAFC";
+
+
+			focusBackgroundColor	= "white";
+
+			focusBorderBottom		= "2px solid #4CC2FF";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "#2D2D2D!important"
+
+			webkitBoxShadow			= "0 0 0px 30px #2D2D2D inset!important";
+
+			webkitTextFillColor		= "white";
+
+			color					= "white"
+
+			transition				= "background-color 5000s ease-in-out 0s";
+
+
+			border					= "1px solid #303030";
+
+			borderBottom			= "2px solid #9A9A9A";
+
+			color					= "WHITE";
+
+			opaqueBackgroundColor	= "#2D2D2D!important";
+
+
+			focusBackgroundColor	= "#1F1F1F";
+
+			focusBorderBottom		= "2px solid #0067C0";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "1px solid #9A9A9A";
+
+	
+
+		#endif
+	
+
+	#endif
+
+
+	constructor( object, collection ) {
+
+		super( object, collection );
+
+		if( collection && collection.type == "collection" ) {
+
+			for (var i = 0; i < collection.rows.length; i++) {
+
+				var row = collection.rows[i];
+
+				this["option" + i] = row;
+			}
+
+		}
+
+	}
+
+
+	
+	change() {
+
+		if( this.element.selectedOptions ) {
+
+			var selectedElement	= this.element.selectedOptions[ 0 ];
+			
+			var selectedID		= parseFloat( selectedElement.value );
+			
+			this.value			= selectedID;
+			
+			this.parent.value 	= selectedID;
+			
+			console.log("selected option", this.parent);
+		
+		}
+
+		if( this.element.tagName == "SELECT" ) {
+
+			var selectedElement	= this.element.selectedOptions[ 0 ];
+
+			var element 			= this.element;
+
+			var index 				= element.selectedIndex;
+			var options 			= element.options;
+
+			var selectedOption 		= options[ index ];
+			var selectedOptionValue = selectedOption.value;
+
+			this.value			= selectedOptionValue;
+			
+			this.parent.value 	= selectedOptionValue;
+
+			console.log( "value is now:", this.value );
+		}
+
+
+		if( this.update ) {
+
+			this.update();
+			
+		}
+		
+	
+	}
+	
+	addValue( value ) {
+		
+		if( !this.values.includes( value ) ) {
+		
+			this.values.push( value );
+		}
+		
+		this.value = this.values.join(",");
+	
+	}
+	
+	removeValue( value ) {
+	
+		for( var c = 0; c < this.values.length;c++ ) {
+		
+			if( this.values[c] == value ) {
+			
+				delete this.values[c];
+			
+			}
+		
+		}
+		
+		this.value = this.values.join(",");
+	
+	}
+	
+	valueExists( value ) {
+	
+		return this.values.includes( value );
+	
+	}
+	
+
+
+	serverSign( object ) {
+		
+		this.create();
+
+	}
+
+
+	permission() {
+		
+		this.allow( permission.admin, "READ" );
+
+		this.allow( permission.admin, "WRITE" );
+
+	}
+
+	addOption( value, label, selected ) {
+
+		var optionElement		= document.createElement("option")
+
+		optionElement.text 		= label;
+
+		optionElement.id 		= value;
+
+		optionElement.value 	= value;
+
+		if( label == "Select Country" ) {
+
+			optionElement.setAttribute("disabled", "")  
+
+			optionElement.setAttribute("selected", "")  
+			
+
+		}
+
+		if( selected ) {
+
+			optionElement.setAttribute( "selected", "" )  
+
+		}
+
+		this.customElement.appendChild( optionElement );
+
+	}
+
+}
+
+
+
+
+
+

application/elements/selectCollection.js

@@ -0,0 +1,52 @@
+
+
+import collection						from '/unify/collection.js';
+
+import option 							from '/elements/option.js';
+
+
+
+
+export default class selectCollection extends collection{
+
+	constructor() {
+
+		super( option );
+
+	}
+
+
+	addOption( label, value ) {
+/*
+		var selectOptionObject = new option();
+
+		selectOptionObject.label = label;
+		selectOptionObject.value = value;
+
+		this.addObject( selectOptionObject );
+*/
+	}
+
+
+}
+
+/*
+//var selectCollection = new collection( option );
+
+var selectOptionObject = new option();
+
+selectOptionObject.label = "label a";
+selectOptionObject.value = "value a";
+
+selectCollection.addObject( selectOptionObject );
+
+
+var selectOptionObject = new option();
+
+selectOptionObject.label = "label b";
+selectOptionObject.value = "value b";
+
+selectCollection.addObject( selectOptionObject );
+
+export default selectCollection;
+*/

application/elements/selectRenderCollection.js

@@ -0,0 +1,179 @@
+
+
+import option 							from '/elements/option.js';
+
+import selectCollection					from '/elements/selectCollection.js';
+
+import renderCollection					from '/unify/renderCollection.js';
+
+import document 						from '/unify/document.js';
+
+import groups							from '/user/group/user.group.permission.js';
+
+var id = 0;
+
+export default class selectRenderCollection extends renderCollection {
+
+	customElement 			= document.createElement("select");
+
+	useCustomElement		= true;
+
+
+
+
+	boxMarginLeft				= "auto";
+
+	border;
+
+	shadow;
+
+	#ifdef MACOS
+
+		margin					= 12;
+
+		webkitAppearance		= "none";
+
+		boxWidth				= "20%";
+
+		//opacity					= "20%";
+
+		background	= "none";
+
+		border		= "none";
+
+		fontWeight	= "bold";
+
+		outline		= "none";
+
+		boxShadow	= "none";
+
+		margin		= 10;
+
+
+		#ifdef LIGHT
+
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color		= "white";
+
+			background	= "#2a2525f5";
+
+		#endif
+	
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+		padding				= "6px 12px";
+
+		height				= "fit-content";
+
+		margin				= 12;
+
+		borderRadius		= 6;
+
+		border				= "none";
+
+		#ifdef LIGHT
+
+			background		= "#F7FAFC";
+
+		#endif
+
+		#ifdef DARK
+
+			color		= "white";
+
+			background	= "#36373a";
+
+		#endif
+
+		borderRadius	= 2;
+
+
+	#endif
+
+	addOption( value, label, selected ) {
+
+		var optionElement		= document.createElement("option")
+
+		optionElement.text 		= label;
+
+		optionElement.id 		= value;
+
+		optionElement.value 	= value;
+
+		if( label == "Select Country" ) {
+
+			optionElement.setAttribute("disabled", "")  
+
+			optionElement.setAttribute("selected", "")  
+			
+
+		}
+
+		if( selected ) {
+
+			optionElement.setAttribute( "selected", "" )  
+
+		}
+
+		this.customElement.appendChild( optionElement );
+
+	}
+
+	removeErrorMessages() {
+
+		var errorBlocks = document.querySelectorAll(".errorBlock");
+
+		for (var i = 0; i < errorBlocks.length; i++) {
+
+			errorBlocks[i].remove();
+
+		}
+
+	}
+
+	showError( text ) {
+
+		this.removeErrorMessages();
+
+		var errorBlock	= document.createElement("div");
+
+		errorBlock.innerText	= text;
+
+		errorBlock.className	= "errorBlock";
+
+		this.boxElement.appendChild( errorBlock );
+
+	}
+
+	focus() {
+
+		var selectedIndex	= this.customElement.selectedIndex;
+
+		this.hightlight( selectedIndex )
+
+
+
+		this.customElement.focus();
+		
+	}
+
+	permission( object ) {
+
+		this.allow( groups.admin , "WRITE" );
+
+		this.allow( groups.admin , "READ" );
+
+	}
+
+}

application/elements/tableCell.js

@@ -0,0 +1,11 @@
+
+
+export default class tableCell{
+
+	display				= "table-cell";
+	
+	layers				= 1;
+
+	renderToDOM			= true;
+
+}

application/elements/taskbar/taskbar.js

@@ -0,0 +1,52 @@
+
+
+import flexbox 						from '/elements/flexbox.js';
+
+import frostedGlass					from '/elements/window/frostedGlass.js';
+
+import draggable 					from '/elements/window/draggable.js';
+
+
+
+
+export default class taskbar extends flexbox{
+
+	selector		= "#application";
+
+	position		= "absolute";
+
+	left			= "0";
+
+	bottom			= "0"
+
+	width			= "100%";
+
+	height			= 50;
+	#ifdef MACOS
+
+		fontFamily		= "sf-ui";
+
+		width			= 600;
+
+		#ifdef DARK
+
+			background		= "#161110bf";
+
+			
+
+		#endif
+
+		#ifdef LIGHT
+
+			//background		= "white";
+
+			background				= "#fdfdfdbf"
+
+		#endif
+
+		backdropFilter			= "blur(22px)";
+
+	#endif
+
+
+}

application/elements/textarea.js

@@ -0,0 +1,306 @@
+
+
+import document 		from '/unify/document.js';
+
+import tools	 		from '/unify/tools.js';
+
+export default class textarea{
+
+	outline					= "none";
+
+	margin					= 12;
+
+	renderToDOM				= true;
+
+	#ifdef MACOS
+
+		width					= "70%";
+
+		#ifdef LIGHT
+
+			background		= "rgb(0 0 0 / 3%)";
+
+			background		= "rgb(0 0 0 / 3%)";
+
+			color			= "black";
+
+		#endif
+
+
+		#ifdef DARK
+
+			background		= "rgb(255 255 255 / 3%)";
+
+			background		= "#3e3c3c!important";
+
+			color			= "white";
+
+		#endif
+
+		padding					= 6;
+
+		margin					= 6;
+
+		marginRight				= 20;
+
+		height					= "fit-content";
+
+		borderRadius			= 0;
+
+		fontWeight				= "bold";
+
+		fontSize				= 10;
+
+		border					= "1px solid rgb(255 255 255 / 18%)";
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+
+		margin					= 12;
+
+		padding					= 12;
+
+
+		borderWidth				= 1;
+
+		borderRadius			= 6;
+
+
+		borderColor				= "#E5E5E5";
+
+		borderBottomColor		= "#868686";
+
+		#ifdef LIGHT
+
+			background	= "#F7FAFC";
+
+			border		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background		= "#2D2D2D"
+
+			border			= "1px solid #303030";
+
+			borderBottom	= "2px solid #9A9A9A";
+
+			color			= "WHITE";
+
+		#endif
+	
+	#endif
+
+
+
+	#ifdef ANDROID
+
+		margin		 = 4
+
+		height			= "auto"
+		#ifdef LIGHT
+
+			border		= "1px solid #E5E5E5";
+
+			borderRadius	= 20;
+
+			background		= "white";
+
+			padding			= 6;
+
+		#endif
+
+	#endif
+
+
+
+	focus() {
+
+		#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			this.borderBottom		= "2px solid #0067C0";
+
+			this.background			= "white";
+
+		#endif 
+
+		#ifdef DARK
+
+
+			this.borderBottom		= "2px solid #4CC2FF";
+
+			this.background			= "#1F1F1F";
+
+		#endif
+
+		#endif WINDOWS
+
+	}
+
+	blur() {
+
+
+		#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			this.background			= "#fbfbfb";
+
+			this.borderBottom		= "2px solid #868686";
+
+		#endif 
+
+		#ifdef DARK
+
+
+			this.background		= "#2D2D2D"
+
+			this.borderBottom	= "1px solid #9A9A9A";
+
+		#endif
+
+		#endif WINDOWS
+		
+	}
+
+
+	value 	= "";
+
+	layers	= 1;
+
+	
+	customElement 		= document.createElement("textarea");
+	
+	useCustomElement	= true;
+	//border			= "1px solid #d8d8d9";
+	
+	scrollbarColor		= "#98adc8 #eaeaea";
+
+	constructor() {
+
+		//super();
+		
+		var that = this;
+		
+		if( this.customElement.addEventListener ) {
+			
+			this.customElement.addEventListener('keydown', function( e ) {
+			
+			    if( e.keyCode === 9 ) { 
+
+					var start 		= this.selectionStart;
+
+					var end 		= this.selectionEnd;
+
+					var target 		= e.target;
+
+					var value 		= target.value;
+
+					// set textarea value to: text before caret + tab + text after caret
+					target.value = value.substring(0, start)
+						    + "	"
+						    + value.substring(end);
+
+					// put caret at right position again (add one for the tab)
+					this.selectionStart = this.selectionEnd = start + 1;
+
+					// prevent the focus lose
+					e.preventDefault();
+				
+			    }
+			    
+			}, false );
+
+		}
+		
+	}
+	
+	async keyup( event ){
+		//console.log("event.target.value", event.target.value);
+
+		this.value = event.target.value;
+
+	}
+
+	setup() {
+
+		var that = this;
+
+		that._useCustomElement = this.useCustomElement;
+
+		this.__defineSetter__( "useCustomElement", function( value ) { 
+
+			that._useCustomElement = value;
+			
+			that.setupElement( value );
+
+		});
+
+		this.__defineGetter__( "useCustomElement", function( value ){ 
+			
+			if( typeof that._useCustomElement == "undefined" ) {
+			
+				that._useCustomElement = false;
+
+				return false;
+				
+			} else {
+			
+				return that._useCustomElement;
+				
+			}
+		});
+
+
+		this.setupElement( this.useCustomElement );
+
+	}
+
+	setupElement( value ) {
+
+		this.customElement.setAttribute( "placeholder", this.placeholder );
+		
+
+		if( this.element ) {
+		
+			var parentNode = this.element.parentNode;
+			
+			if( this.useCustomElement ) {
+			
+				if( this.element.tagName != this.customElement.tagName ) {
+
+					parentNode.replaceChild( this.customElement, this.element );
+					
+					this.element = this.customElement;
+				
+				}
+			
+			} else {
+			
+				if( this.element.tagName != this.defaultElement.tagName ) {
+			
+					parentNode.replaceChild( this.defaultElement, this.element );
+					
+					this.element = this.defaultElement;
+				
+				}
+				
+			}
+			
+			this.updateElementContent();
+		
+		}
+
+		
+	}
+
+}
+

application/elements/toggle.js

@@ -0,0 +1,96 @@
+
+
+export default class toggle{
+
+	boxCursor			= "pointer";
+
+	cursor				= "pointer";
+
+	boxBorderRadius		= 16;
+
+	boxBackground		= "grey"
+
+	boxWidth			= 50;
+
+	boxHeight			= 24;
+
+	height				= 20;
+
+	width				= 20;
+
+	margin				= 2;
+
+	borderRadius		= "100%"
+
+	background			= "white";
+
+	transform;
+
+	value				= true;
+
+	transition			= "0.2s";
+
+	boxTransition		= "0.2s";
+
+	create() {
+
+		if( this.value ) {
+
+			this.transform 		= "translateX(130%)";
+
+			this.boxBackground	= "green";
+
+
+		} else {
+
+			this.transform 		= "translateX(0%)";
+
+			this.boxBackground	= "grey";
+
+		}
+
+	}
+
+	boxClick( event ) {
+
+		this.updateState( event );
+
+
+	}
+
+	click( event ) {
+
+		this.updateState( event );
+
+	}
+
+
+	updateState( event ) {
+
+		if( this.value ) {
+
+			this.transform 		= "translateX(0%)";
+
+			this.boxBackground	= "grey";
+
+			this.value			= false;
+
+		} else {
+
+			this.transform 		= "translateX(130%)";
+
+			this.value			= true;
+
+			this.boxBackground	= "green";
+
+		}
+
+		if( this.change ) {
+
+			this.change( event );
+
+		}
+
+	}
+	
+}

application/elements/window/draggable.js

@@ -0,0 +1,229 @@
+class vector2{
+
+	constructor( x, y ) {
+	
+		this.x = x;
+		this.y = y;
+	
+	}
+
+	x = 0;
+	y = 0;
+
+}
+
+function delay(time) {
+  return new Promise(resolve => setTimeout(resolve, time));
+}
+
+
+export default class draggable{
+
+	backfaceVisibility	 = false;
+
+	position	= "absolute";
+
+	zIndex;
+
+#ifdef CLIENT
+
+	propegateEvent		= false;
+
+	transition			= "none";
+
+
+	transform;
+
+	width;
+
+	height;
+
+	x;
+
+	y;
+
+
+	transition	= "width 1s, height 1s";
+
+	// Custom Properties
+	draggable			= true;
+
+	grab				= false;
+
+	lastPosition;
+
+	currentPosition		= new vector2( 0, 0 );
+
+	grabPosition		= new vector2( 0, 0 );
+
+
+	state				= "normal";
+
+
+	click() {
+
+		this.grab = false;
+
+	}
+
+	mouseout() {
+
+		//this.grab = false;
+
+	}
+
+
+	async render( delta ) {
+
+		#ifdef ANDROID
+
+			this.transform 			= "translate(0px, 0px)";
+
+			return true;
+
+		#endif
+
+		if( this.draggable ) {
+
+			if(!this.lastPosition) {
+
+				return false;
+
+			}
+
+			var x = 	this.lastPosition.x;
+
+			var y =  	this.lastPosition.y;
+
+		
+			if( this.grab ) {
+
+
+				var x = this.mouse.x - this.grabPosition.x + this.lastPosition.x;
+
+				var y = this.mouse.y - this.grabPosition.y + this.lastPosition.y;
+
+
+			}
+
+			this.transform 			= "translate3d("+ x+"px, "+ y +"px, 0)";
+
+			this.currentPosition	= new vector2( x , y );
+
+			if( this.updateBackgroundCoordinates ) {
+
+				this.updateBackgroundCoordinates();
+
+			}
+
+		}
+	}
+
+	maximize() {
+
+		this.restorePosition	= this.transform;
+
+		this.width				= "100vw";
+
+		this.height				= "100vh"
+
+		this.draggable 			= false;
+
+		this.transition			= "transform 0.1s, width 0.1s, height 0.1s";
+
+		this.transform 			= "translate3d(0px, 0px)";
+
+		this.state				= "maximized"
+
+		//this.lastPosition		= new vector2( 0,0 );
+
+	}
+
+	async restore() {
+
+		this.width	= "";
+
+		this.height	= "";
+
+		this.draggable 			= true;
+
+		await delay(1000);
+
+		this.transition			= "";
+
+	}
+
+
+
+	center() {
+
+		this.element.style.zIndex	= document.globalZIndex++;
+		
+		var domWindow		= document.defaultView;
+
+		this.windowHeight	= domWindow.innerHeight;
+
+		this.windowWidth	= domWindow.innerWidth;
+
+
+		var boundBox		= this.element.getBoundingClientRect();
+
+
+		var width				= boundBox.width;
+
+		var height			= boundBox.height;
+
+
+		var x						= this.windowWidth / 2 - ( width / 2 );
+
+		var y						= this.windowHeight / 2 - ( height / 2 ); 
+
+
+		this.lastPosition		= new vector2( Math.round(x), Math.round(y) );
+
+	}
+
+	mouseup() {
+	
+		this.grab 					= false;
+
+		this.border			= "none"
+
+		var boundBox				= this.defaultElement.getBoundingClientRect();
+
+		var x 						= boundBox.x;
+
+		var y 						= boundBox.y;
+
+		this.lastPosition			= this.currentPosition;
+
+
+
+	}
+	
+	async mousedown( event ) {
+
+		if( event.button != 0 ) {
+
+			return false;
+
+		}
+
+		if( !this.lastPosition ) {
+
+			this.lastPosition			= this.currentPosition;
+
+		}
+
+		this.element.style.zIndex	= document.globalZIndex++;
+
+		this.grab			= true;
+
+		this.grabPosition	= this.mouse;
+
+	}
+
+#endif
+
+}
+

application/elements/window/frostedGlass.js

@@ -0,0 +1,82 @@
+
+export default class frostedGlass{
+
+	//backgroundImage	= "url('/assets/images/frosted.png')";
+
+	backgroundSize;
+
+	backgroundPosition;
+	
+	clickPosition		= [0,0];
+
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/darkBlur.png')";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//backgroundImage		= "url('/assets/images/wallpapers/windows/lightBlur.png')";
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/darkBlur.jpg')";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/light/lightBlur.jpg')";
+
+		#endif
+
+	#endif
+
+
+	updateBackgroundCoordinates() {
+
+		var backgroundSize			= window.innerWidth + "px " + window.innerHeight + "px"
+
+		this.backgroundSize			= backgroundSize;
+
+		this.boxBackgroundSize		= backgroundSize;
+
+
+		var boundBox				= this.defaultElement.getBoundingClientRect();
+
+		var x 						= boundBox.x * -1;
+
+		var y 						= boundBox.y * -1;
+
+		var backgroundPosition		= x + "px " + y + "px";
+
+		this.backgroundPosition		= backgroundPosition;
+
+	}
+
+	create() {
+
+		this.updateBackgroundCoordinates();
+
+	}
+
+
+	windowResize() {
+
+		this.updateBackgroundCoordinates();
+
+	}
+	
+}

application/elements/window/header.js

@@ -0,0 +1,276 @@
+
+
+import icon	from "/elements/icon.js";
+
+
+class maximizeButton extends icon{
+
+	margin	= 20;
+
+	cursor	= "pointer"
+
+	width	= 16;
+
+	height	= 16;
+
+	backgroundSize	= "contain!important";
+
+	#ifdef LIGHT
+
+		filter				= "invert(0)"
+		
+	#endif
+
+	#ifdef DARK
+
+		filter				= "invert(1)"
+
+	#endif
+
+
+	click() {
+
+		var window = this.parent.parent.parent;
+
+
+		if( window.state == "maximized" ) {
+
+			window.restore();
+
+			window.state	= "normal";
+
+			this.setImage("assets/images/icons/maximize.svg")
+
+		} else {
+
+			window.maximize();
+
+			window.state	= "maximized";
+
+			this.setImage("assets/images/icons/restore.svg")
+
+
+		}
+	}
+
+	constructor() {
+
+		super("maximize.svg")
+
+	}
+
+	transition	= "1s"
+
+}
+
+
+
+class closeButton extends icon{
+
+	margin	= 20;
+
+	cursor	= "pointer"
+
+	width	= 16;
+
+	height	= 16;
+
+	backgroundSize	= "contain!important";
+
+	#ifdef LIGHT
+
+		filter				= "invert(0)"
+		
+	#endif
+
+	#ifdef DARK
+
+		filter				= "invert(1)"
+
+	#endif
+
+
+	click() {
+
+		this.parent.parent.parent.hide();
+
+	}
+
+	constructor() {
+
+		super("close.svg")
+
+	}
+
+
+}
+
+
+class leftControl{
+
+
+
+	closeButton		= new closeButton();
+
+	maximizeButton	= new maximizeButton();
+
+	#ifdef DARK
+
+		color		= "#363636";
+
+	#endif
+
+	height		= "40px"
+
+	display		= "flex";
+
+	layers		= 1;
+
+	flex		= "1";
+
+	flexDirection	= "row"
+
+}
+
+class title{
+
+	//background	= "blue";
+
+	setTitle( title ) {
+
+		this.element.innerText = title;
+
+	}
+
+	padding		= 20;
+
+	height		= "40px"
+
+	display		= "block";
+
+	layers		= 1;
+
+}
+
+
+class rightControl{
+
+	//background	= "yellow";
+
+	height		= "40px"
+
+	display		= "block";
+
+	flex		= "1";
+
+	layers		= 1;
+
+}
+
+
+export default class windowHeader{
+
+
+
+	constructor( text, gridName ) {
+
+		this.title.text 		= text;
+		
+		this.gridArea 	= gridName;
+
+	}
+
+
+
+	setTitle( title ) {
+
+		this.title.setTitle( title );
+	}
+
+	boxShadow				= "0px 1px 1px 0px #00000008";
+
+	marginBottom			= 10;
+
+
+	leftControl		= new leftControl();
+
+	title			= new title();
+
+	rightControl	= new rightControl();
+
+
+
+	width			= "100%";
+
+	layers			= 1;
+
+	gridArea		= "passwordLabel";
+
+	color			= "black";
+
+	//padding			= 20;
+
+	fontWeight		= "bold";
+
+	fontSize		= 12;
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color	= "white";
+
+		#endif
+	
+
+	#endif
+
+
+	#ifdef MACOS
+
+		borderTopLeftRadius		= "4px"
+
+		borderTopRightRadius	= "4px" 
+
+		//padding					= 10;
+
+		//paddingLeft				= 0;
+
+		boxWidth				= "100%";
+
+
+
+
+		#ifdef LIGHT
+
+			borderBottom			= "1px solid #f1f1f1";
+
+			background	= "white";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color					= "white";
+
+			borderBottom			= "1px solid black";
+
+			background				= "#1c1c1c";
+
+		#endif
+	
+
+	#endif
+
+
+}