[$mol stuff] #stuff #mol

mol_app_demo.view.ts

// Удаленный код

@ $mol_mem
nav_hierarchy() {
	const names = this.names_demo_filtered()
	
	const hierarchy = {} as { [ prefix : string ] : $mol_grid_node }
	const root = hierarchy[ '' ] = {
		id : '' ,
		parent : null as any as $mol_grid_node ,
		sub : [] as $mol_grid_node[] ,
	}
	
	names.forEach( name => {
		const chunks = name.split( /(?=[_.-])/ )
		let branch = root
		for( let i = 1 ; i <= chunks.length ; ++ i ) {
			const prefix = chunks.slice( 0 , i ).join( '' )
			if( !hierarchy[ prefix ] ) {
				branch.sub.push( hierarchy[ prefix ] = {
					id : prefix ,
					parent : branch ,
					sub : [] as $mol_grid_node[] ,
				} )
			}
			branch = hierarchy[ prefix ]
		}
	} )
	
	hierarchy[ '' ].sub.map( child => reduce( child ) )
	
	function reduce( node : $mol_grid_node ) {
		if( names.indexOf( node.id ) >= 0 ) return node
		
		node.sub = node.sub.map( child => reduce( child ) )
		if( node.sub.length !== 1 ) return node
		
		node.sub[0].parent = node.parent
		return node.sub[0]
	}
	
	return hierarchy
}

nav_option( id : string ) {
	const parent = this.nav_hierarchy()[ id ].parent
	
	const title = `$${ id }`
	.substring( parent.id.length + 1 )
	.replace( /^[-._]|[-._]demo$/g , '' )
	.replace( /_/g , ' ' )
	.replace( /^(\w)/ , letter => letter.toUpperCase() )
	
	return { title }
}

mol_demo_small.css

/* Old deleted css */

[mol_demo_small] {
	max-width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	box-sizing: border-box;
	flex: 0 0 auto;
	align-self: flex-start;
	background: var(--mol_theme_back);
	color: var(--mol_theme_text);
}